New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Design

by udecode in udecode/kitcn

Design and implement kitcn UI using live www/example tokens and primitives, accessible states, honest data formatting, and browser proof.

Apache-2.0Auto-check passedFrontend & Design

Install Design

skills CLI
$ npx skills add udecode/kitcn --skill design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install udecode/kitcn design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/udecode/kitcn.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/design .claude/skills/design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
design
GitHub stars
450
Token cost
~1k tokens
SKILL.md length
519 words
Files
1
Skills in repo
33
Repo updated
First seen
Licence
Apache-2.0

At a glance

Design and implement kitcn UI using live www/example tokens and primitives, accessible states, honest data formatting, and browser proof.

  • Works in 5 steps: VISION.md and the named product/API… → The live route and its data contract. → www/app/global.css,… → …
  • Frontend & Design work in your project
  • SKILL.md covers Read First, Tokens And Primitives, Subject And Hierarchy and Honest States, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Design is an agent skill from udecode/kitcn. Design and implement kitcn UI using live www/example tokens and primitives, accessible states, honest data formatting, and browser proof.

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. The repository describes itself as: Convex + Better Auth + tRPC + Drizzle + TanStack Query + shadcn. The licence is Apache-2.0.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/design”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. VISION.md and the named product/API source.
  2. The live route and its data contract.
  3. www/app/global.css, www/components/ui/**, and nearby documentation UI.
  4. example/src/app/globals.css, example/src/components/ui/**, and the
  5. Existing loading, empty, error, permission, and mutation states.

What it can do on your machine

Read from SKILL.md and the folder at commit c6010f5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Design loads about 1k tokens when it runs. Until then it costs about 36 tokens; SKILL.md has 519 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~36
When it runs · the whole SKILL.md, loaded when a task matches
~1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from udecode/kitcn at commit c6010f5, republished under its Apache-2.0 licence (© udecode). 519 words, ~1,036 tokens.

Download SKILL.mdSave it as .claude/skills/design/SKILL.md (or your agent's skills folder).
name
design
description
Design and implement kitcn UI using live www/example tokens and primitives, accessible states, honest data formatting, and browser proof.
argument-hint
<route | component | surface> [review|implement]

Kitcn Design

Design from the live subject, data, and interaction. A polished shell around fake states is not done.

Read First

  1. VISION.md and the named product/API source.
  2. The live route and its data contract.
  3. www/app/global.css, www/components/ui/**, and nearby documentation UI.
  4. example/src/app/globals.css, example/src/components/ui/**, and the matching example feature.
  5. Existing loading, empty, error, permission, and mutation states.

Treat live tokens and components as the palette. Do not introduce an isolated design language in a feature file.

Tokens And Primitives

  • Use semantic color, spacing, radius, type, and motion tokens.
  • Extend the token owner when a reusable need is real; do not hide raw values behind one-off aliases.
  • Prefer existing shadcn-derived primitives and composition patterns.
  • Change primitive behavior only when every consumer benefits.
  • Keep docs and example variants consistent when they express the same product concept, while preserving their distinct runtime ownership.

Subject And Hierarchy

Start with the user's decision:

  • What is the primary object or action?
  • Which facts change the decision?
  • What is supporting context?
  • What is optional detail?

One view gets one dominant hierarchy. Remove competing cards, repeated labels, and decorative metadata that do not improve comprehension.

Honest States

Design every state before declaring the happy path complete:

  • initial/loading and background refresh;
  • empty versus filtered-empty;
  • missing setup or permission;
  • inline validation and server rejection;
  • mutation pending, success, partial failure, and retry;
  • stale or unavailable external data;
  • destructive confirmation and irreversible completion.

Do not render zero as missing, missing as zero, or inferred data as confirmed. Label samples and previews. Preserve the user's input after failure.

Accessibility

  • Use semantic elements before ARIA.
  • Give controls visible labels or accessible names.
  • Keep keyboard order aligned with visual order.
  • Provide focus visibility, escape behavior, and focus restoration for overlays.
  • Announce important async success/error changes without noisy repetition.
  • Do not encode status only by color.
  • Respect reduced motion and usable target sizes.
Show full SKILL.md (209 more words)Show less

Copy And Formatting

  • Use product language already established in docs and examples.
  • Prefer direct verbs and concrete nouns.
  • Explain consequences before destructive or expensive actions.
  • Format dates, numbers, identifiers, and durations from typed values with the intended locale/timezone; do not pre-format them in the data layer.
  • Empty copy should say what is absent and the useful next action.

Motion

Motion explains state change. Keep it short, interruptible, and restrained. Never delay the user's next action for decoration. Skeletons should preserve layout; spinners belong to bounded operations.

Process

  1. Inspect the running surface and representative data.
  2. Write the state and interaction matrix.
  3. Reuse or adjust live tokens/primitives.
  4. Implement the smallest coherent component ownership.
  5. Test responsive, keyboard, reduced-motion, loading, empty, error, and permission states.
  6. Use Browser for route/DOM/responsive/screenshot proof. Use Chrome or Computer only when native browser/OS behavior requires it.
  7. Run focused tests and React review rules, then autoreview.

Definition Of Done

  • The real subject and primary action are obvious.
  • All states are honest and actionable.
  • Tokens and primitives have clear owners.
  • Keyboard, focus, names, contrast, and motion are proven.
  • No fake data or silent permission assumption is needed for the screenshot.
  • Browser evidence covers the route and relevant breakpoints.
  • Docs/example source ownership remains correct.

© udecode, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/design of udecode/kitcn.

Open the folder on GitHubat commit c6010f5

Compare with similar skills

Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Design this skilludecode/kitcn450—~1kAutomated safety check: PassApache-2.0
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane60k12 repos~657Automated safety check: PassAGPL-3.0
React Composition Patternsvercel-labs/openreview1.7k58 repos~721Automated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    60k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • React Composition Patterns

    vercel-labs/openreview

    Official

    Rules for structuring React components with composition instead of boolean props, covering compound components, lifted state, variants and React 19 changes.

    1.7k GitHub starsUsed in 58 repos~721 tokens
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

More from udecode/kitcn

All 33 skills in this repo

  • Walkthrough

    udecode/kitcn

    Create a short annotated visual walkthrough from real final-state screenshots or rendered artifacts.

    450 GitHub stars~1.6k tokensUpdated 6 days ago
    Auto-check passed

  • Avoid Feature Creep

    udecode/kitcn

    Prevent feature creep when building software, apps, and AI-powered products.

    450 GitHub stars~2.7k tokensUpdated 6 days ago
    Auto-check passed

  • Changeset Resolve

    udecode/kitcn

    Repair an unreleased .changeset/.md file so it matches the real branch delta against main.

    450 GitHub stars~922 tokensUpdated 6 days ago
    Auto-check passed

  • Convex Release Audit

    udecode/kitcn

    Audit newer Convex npm releases against kitcn. An agent skill from udecode/kitcn.

    450 GitHub stars~1.8k tokensUpdated 6 days ago
    Auto-check passed

  • Jotai X

    udecode/kitcn

    A skill your agent uses when working with Jotai X stores (createAtomStore), accessing state in components or callbacks, persisting state to cookies or localStorage

    450 GitHub stars~3.7k tokensUpdated 6 days ago
    Auto-check passed

  • Linear Backlog

    udecode/kitcn

    Run a scoped Linear backlog autonomously as a sequence of maximal safe parallel batches by composing orchestrator, autogoal, and task.

    450 GitHub stars~3.1k tokensUpdated 6 days ago
    Auto-check passed

Categories

Questions about Design

What does Design do?

Design and implement kitcn UI using live www/example tokens and primitives, accessible states, honest data formatting, and browser proof. Design is an agent skill from udecode/kitcn. Design and implement kitcn UI using live www/example tokens and primitives, accessible states, honest data formatting, and browser proof.

When should I use Design?

Design fits situations like: frontend & Design work in your project.

How do I install Design in Claude Code?

Run `npx skills add udecode/kitcn --skill design -a claude-code`. Or copy the skill folder (.agents/skills/design in udecode/kitcn) into .claude/skills/design in your project. Claude Code loads it when a task matches its description.

How do I install Design in Codex?

Run `npx skills add udecode/kitcn --skill design -a codex`. Or copy the skill folder (.agents/skills/design in udecode/kitcn) into .agents/skills/design in your project. Codex loads it when a task matches its description.

Can I use Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add udecode/kitcn --skill design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design, .gemini/skills/design, .github/skills/design and .opencode/skills/design in your project.

What does Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Design is instructions for the agent only.

Does Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Design use?

Design is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Design use?

About 1k tokens (SKILL.md is roughly 4.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Design?

Skills that share tags, products or a category with Design: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 60k stars), React Composition Patterns (vercel-labs/openreview, 1.7k stars) and Impeccable (bestofjs/bestofjs, 3.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design?

udecode (a GitHub organization) maintains it in udecode/kitcn, which has 450 GitHub stars. The repository holds 33 skills in this directory. The repository was last updated on October 1, 2026.

Source: udecode/kitcn on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.