skill

stitch-nextjs-components

Converts a Stitch screen, a local HTML file, or a URL into production-ready Next.js 15 App Router components — Server vs Client split, dark mode via CSS variables, TypeScript strict, ARIA, and responsive mobile-first layout. Only the Stitch route needs an API key.

Description as published by the maintainer. Source

• active

active — Most recent push to the repository was 2026-07-20.

Signals

These are separate measurements of different things. They are deliberately not combined into one score, because a popularity number that mixes website traffic with saves and stars cannot be checked or acted on.

Will this work with your setup?

No harness stated by the author and no install path convention detected. Compatibility is untested.

We have not run this skill against a task with and without it enabled, so we cannot tell you whether it improves anything, what it costs in tokens, or whether it duplicates behaviour your harness already has. When we have run that test, the result will appear on this page with the task, the versions and the budget it used.

The skill definition lives at skills/stitch-nextjs-components/SKILL.md in https://github.com/gabelul/stitch-kit.

Where to get it

• Repository — https://github.com/gabelul/stitch-kit

Related, by what their authors tagged them

• gabelul-stitch-kit-stitch-a11y — last commit 2026-07-20, shares ai-agent-skills, claude-code-plugin, codex-cli
  Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attribu…
• gabelul-stitch-kit-stitch-animate — last commit 2026-07-20, shares ai-agent-skills, claude-code-plugin, codex-cli
  Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or S…
• gabelul-stitch-kit-stitch-design-md — last commit 2026-07-20, shares ai-agent-skills, claude-code-plugin, codex-cli
  Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette wit…
• gabelul-stitch-kit-stitch-design-system — last commit 2026-07-20, shares ai-agent-skills, claude-code-plugin, codex-cli
  Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailw…
• gabelul-stitch-kit-stitch-html-components — last commit 2026-07-20, shares ai-agent-skills, claude-code-plugin, codex-cli
  Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS…
• gabelul-stitch-kit-stitch-ideate — last commit 2026-07-20, shares ai-agent-skills, claude-code-plugin, codex-cli
  Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adap…
• gabelul-stitch-kit-stitch-loop — last commit 2026-07-20, shares ai-agent-skills, claude-code-plugin, codex-cli
  Iteratively build multi-page websites using Stitch. Reads next-prompt.md (the baton), generates the next page with Stit…
• gabelul-stitch-kit-stitch-mcp-apply-design-system — last commit 2026-07-20, shares ai-agent-skills, claude-code-plugin, codex-cli
  Applies a Stitch Design System to existing screens — updates their colors, fonts, and roundness to match the design sys…
• gabelul-stitch-kit-stitch-mcp-create-design-system — last commit 2026-07-20, shares ai-agent-skills, claude-code-plugin, codex-cli
  Creates a reusable Stitch Design System from theme tokens — colors, fonts, roundness. Can be applied to future screens…
• gabelul-stitch-kit-stitch-mcp-create-design-system-from-design-md — last commit 2026-07-20, shares ai-agent-skills, claude-code-plugin, codex-cli
  Creates a Stitch Design System from a DESIGN.md that was already uploaded with stitch-mcp-upload-design-md. Second half…

These share tags the maintainers applied themselves, such as ai-agent-skills, claude-code-plugin, codex-cli, coding-agent. Common tags like "mcp" or "ai" are ignored for this: agreeing with six hundred other projects is not a similarity.

This is not a recommendation and not a test result. It is a map of what the authors said their work is about.

Also from gabelul

• gabelul-stitch-kit-stitch-mcp-create-project — last commit 2026-07-20
  Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a proj…
• gabelul-stitch-kit-stitch-mcp-delete-project — last commit 2026-07-20
  Permanently deletes a Stitch project and all its screens. Destructive — requires explicit user confirmation before call…
• gabelul-stitch-kit-stitch-mcp-edit-screens — last commit 2026-07-20
  Edits existing Stitch screens with text prompts — the iteration tool. Change colors, layout, content, or style without…
• gabelul-stitch-kit-stitch-mcp-generate-screen-from-text — last commit 2026-07-20
  Generates a high-fidelity UI screen or wireframe from a text prompt using Stitch. This is the core text-to-UI generatio…
• gabelul-stitch-kit-stitch-mcp-generate-variants — last commit 2026-07-20
  Generates design variants of existing Stitch screens using the native variant API. Explore alternative layouts, color s…
• gabelul-stitch-kit-stitch-mcp-get-project — last commit 2026-07-20
  Retrieves metadata for a specific Stitch project — title, theme, create/update time. Use to inspect a project before ge…
• gabelul-stitch-kit-stitch-mcp-get-screen — last commit 2026-07-20
  Retrieves full details of a specific Stitch screen — HTML download URL, screenshot URL, dimensions. This is the final s…
• gabelul-stitch-kit-stitch-mcp-list-design-systems — last commit 2026-07-20
  Lists all Stitch Design Systems, optionally filtered by project. Returns asset names needed for apply and update operat…
• gabelul-stitch-kit-stitch-mcp-list-projects — last commit 2026-07-20
  Lists all Stitch projects accessible to the user. Use this to find an existing project ID before resuming work or gener…
• gabelul-stitch-kit-stitch-mcp-list-screens — last commit 2026-07-20
  Lists all screens in a Stitch project. Use this after generate_screen_from_text to find the screenId of the newly gener…

How the author describes it

Topics the maintainer set on GitHub: ai-agent-skills, claude-code, claude-code-plugin, claude-code-skills, codex-cli, coding-agent, design-agent, design-system, design-to-code, google-stitch, mcp, nextjs, react-native, stitch, stitch-mcp, svelte, swiftui, text-to-ui, ui-design, ui-generation.