> ## Documentation Index
> Fetch the complete documentation index at: https://mariacristoforo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Skills API

<p className="text-lg leading-relaxed text-gray-600 dark:text-gray-400 mb-8">An API-style reference of my capabilities, tools, languages, and their proficiency levels.</p>

<div className="rounded-xl bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 px-5 py-4 mb-8 flex flex-col gap-3">
  <div className="font-mono text-[10px] font-semibold uppercase tracking-widest text-gray-400 mb-1">Proficiency key</div>

  <div className="flex items-center gap-3">
    <div className="w-24 shrink-0"><span className="skill-badge-active">ACTIVE</span></div>
    <span className="text-sm text-gray-600 dark:text-gray-400">Currently used daily, shipping production features</span>
  </div>

  <div className="flex items-center gap-3">
    <div className="w-24 shrink-0"><span className="skill-badge-fluent">FLUENT</span></div>
    <span className="text-sm text-gray-600 dark:text-gray-400">Comfortable shipping with but not currently used</span>
  </div>

  <div className="flex items-center gap-3">
    <div className="w-24 shrink-0"><span className="skill-badge-familiar">FAMILIAR</span></div>
    <span className="text-sm text-gray-600 dark:text-gray-400">Solid foundations but not used recently</span>
  </div>
</div>

## Development

<div className="my-8" id="skill-typescript">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-active">ACTIVE</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/development/typescript</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">My primary language for frontend work. Comfortable using across large codebases with complex prop structures and API response types.</p>

  **Parameters**

  | Name               | Value                                               |
  | ------------------ | --------------------------------------------------- |
  | `years_experience` | 3                                                   |
  | `last_used`        | Now                                                 |
  | `focus_areas`      | Typed component props, API interfaces, shared types |
  | `used_at`          | Ocular AI, NoxuData, side projects                  |
</div>

***

<div className="my-8" id="skill-javascript">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-fluent">FLUENT</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/development/javascript</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Experienced in handling async patterns, event-driven interaction logic. Mostly using TypeScript now instead.</p>

  **Parameters**

  | Name               | Value                                            |
  | ------------------ | ------------------------------------------------ |
  | `years_experience` | 5                                                |
  | `last_used`        | Early 2025                                       |
  | `focus_areas`      | Async data fetching patterns, event handling     |
  | `used_at`          | DALI Lab, JHU APL, startup internship, Atlassian |
</div>

***

<div className="my-8" id="skill-react">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-active">ACTIVE</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/development/react</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Comfortable with hooks, context, component structuring, and state management. Most of my shipped product work uses React.</p>

  **Parameters**

  | Name               | Value                                             |
  | ------------------ | ------------------------------------------------- |
  | `years_experience` | 5                                                 |
  | `last_used`        | Now                                               |
  | `focus_areas`      | Page and component architecture, state management |
  | `used_at`          | Ocular AI, NoxuData, DALI Lab                     |
</div>

***

<div className="my-8" id="skill-nextjs">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-active">ACTIVE</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/development/nextjs</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Comfortable with folder-based routing, server components, and caching.</p>

  **Parameters**

  | Name               | Value                                             |
  | ------------------ | ------------------------------------------------- |
  | `years_experience` | 2                                                 |
  | `last_used`        | Now                                               |
  | `focus_areas`      | Loading state handling, middleware and auth flows |
  | `used_at`          | Ocular AI, side projects                          |
</div>

***

<div className="my-8" id="skill-tailwind">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-active">ACTIVE</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/development/tailwind</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Prefer Tailwind for intuitive classnames and seamless integration with js components. Able to rapidly make edits and add classes from memory.</p>

  **Parameters**

  | Name               | Value                                |
  | ------------------ | ------------------------------------ |
  | `years_experience` | 2                                    |
  | `last_used`        | Now                                  |
  | `focus_areas`      | Rapid UI styling, responsive layouts |
  | `used_at`          | Ocular AI, NoxuData, DALI Lab        |
</div>

***

<div className="my-8" id="skill-htmlcss">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-active">ACTIVE</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/development/html-css</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Solid command of HTML and CSS fundamentals - flexbox, grid, padding, semantic HTML design.</p>

  **Parameters**

  | Name               | Value                                         |
  | ------------------ | --------------------------------------------- |
  | `years_experience` | 5                                             |
  | `last_used`        | Now                                           |
  | `focus_areas`      | Responsive layouts, custom overrides, theming |
  | `used_at`          | Throughout career                             |
</div>

***

<div className="my-8" id="skill-python">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-fluent">FLUENT</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/development/python</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Experienced in use for scripting, backend services, data processing.</p>

  **Parameters**

  | Name               | Value                                     |
  | ------------------ | ----------------------------------------- |
  | `years_experience` | 6                                         |
  | `last_used`        | Early 2025                                |
  | `focus_areas`      | Internal tooling, fastapi backends        |
  | `used_at`          | NoxuData, Atlassian, Dartmouth coursework |
</div>

***

<div className="my-8" id="skill-java">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-familiar">FAMILIAR</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/development/java</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Where I first learned to code. Used throughout Dartmouth coursework and FIRST Robotics. Not in active use but the foundations are there.</p>

  **Parameters**

  | Name               | Value                                                 |
  | ------------------ | ----------------------------------------------------- |
  | `years_experience` | 4                                                     |
  | `last_used`        | 2022                                                  |
  | `focus_areas`      | Data structures, algorithms, robotics control systems |
  | `used_at`          | Dartmouth CS coursework, FIRST Robotics               |
</div>

***

## Design

<div className="my-8" id="skill-figma">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-fluent">FLUENT</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/design/figma</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Comfortable making wireframes, hifi prototypes, and design systems. Currently used more for making assets rather than full mockups.</p>

  **Parameters**

  | Name               | Value                                  |
  | ------------------ | -------------------------------------- |
  | `years_experience` | 4                                      |
  | `last_used`        | Mid 2025                               |
  | `focus_areas`      | Screen mockups, design systems, assets |
  | `used_at`          | Ocular AI, DALI Lab                    |
</div>

***

<div className="my-8" id="skill-ai-design">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-active">ACTIVE</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/design/ai-assisted-design</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">My current rapid design process leverages AI prototyping tools to get interactive mockups first then iterate from there, allowing me to focus on the broader picture and the reasoning behind each design decision.</p>

  **Parameters**

  | Name          | Value                                                        |
  | ------------- | ------------------------------------------------------------ |
  | `last_used`   | Now                                                          |
  | `focus_areas` | Rapid prototyping, design validation, co-design with clients |
  | `tools`       | v0, Magic Patterns, Cursor                                   |
</div>

***

<div className="my-8" id="skill-ux-research">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-fluent">FLUENT</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/design/ux-research</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Trained in design thinking through Dartmouth's HCD program and DALI Lab. Comfortable running user interviews, mapping user flows, writing problems statements, and synthesizing feedback into design decisions.</p>

  **Parameters**

  | Name          | Value                                         |
  | ------------- | --------------------------------------------- |
  | `last_used`   | 2025                                          |
  | `focus_areas` | User flows, competitor research, design crits |
  | `used_at`     | DALI Lab, Ocular AI, Design Corps             |
</div>

***

## Workflows

<div className="my-8" id="skill-collab">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-active">ACTIVE</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/workflows/cross-functional-collaboration</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Experienced working across design, frontend, and backend on distributed teams. Comfortable bridging the gap between design and implementation constraints, succinctly articulating complex problems.</p>

  **Parameters**

  | Name          | Value                                      |
  | ------------- | ------------------------------------------ |
  | `last_used`   | Now                                        |
  | `focus_areas` | Handoff and communication between subteams |
  | `used_at`     | Ocular AI, NoxuData, Atlassian, DALI Lab   |
</div>

***

<div className="my-8" id="skill-design-to-code">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-active">ACTIVE</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/workflows/design-to-code</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Own the process from design to implementation. Design with development feasibility constraints in mind, handle adding pattern-consistent and modular code to an existing codebase.</p>

  **Parameters**

  | Name          | Value                                                                            |
  | ------------- | -------------------------------------------------------------------------------- |
  | `last_used`   | Now                                                                              |
  | `focus_areas` | End-to-end feature ownership, design system consistency, implementation fidelity |
  | `used_at`     | Ocular AI, NoxuData, DALI Lab                                                    |
</div>

***

<div className="my-8" id="skill-technical-writing">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-active">ACTIVE</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/workflows/technical-writing</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Write clearly about technical and design work for mixed audiences with an emphasis on narrativity and storytelling.</p>

  **Parameters**

  | Name          | Value                               |
  | ------------- | ----------------------------------- |
  | `last_used`   | Now                                 |
  | `focus_areas` | Case studies, essays, documentation |
  | `used_at`     | Throughout career                   |
</div>

***

<div className="my-8" id="skill-customer-communication">
  <div className="mb-4 flex items-center gap-3">
    <span className="skill-badge-active">ACTIVE</span>
    <code className="text-base font-semibold text-gray-900 dark:text-gray-50">/skills/workflows/customer-facing-communication</code>
  </div>

  <p className="mb-6 text-gray-600 dark:text-gray-400">Interacted directly with customers at scale while in support engineering at Atlassian. Able to translate observed product friction into actionable feedback, communicate technical issues clearly and professionally.</p>

  **Parameters**

  | Name          | Value                                              |
  | ------------- | -------------------------------------------------- |
  | `last_used`   | 2023                                               |
  | `focus_areas` | Customer support, accepting and providing feedback |
  | `used_at`     | Atlassian, Ocular AI                               |
</div>

***