From typescript-ui
Use this skill when the user asks to design new UI — a screen, flow, page, component, or full product. Triggers: "design a [thing]", "build me a [screen/page/flow]", "create the UI for", "design the [dashboard/settings/onboarding/landing]", "make this look [distinctive/professional/not AI]". Dispatches the typescript-ui:ui-design-architect Opus agent which commits to a distinctive aesthetic POV, generates a token system (OKLCH + variable fonts + modular spacing + spring motion), and produces production-grade TypeScript + React + Tailwind v4 code that does not look AI-generated. Uses the anti-AI-tells catalogue (108 patterns) as a hard floor and the taste checklist as a pre-ship gate.
npx claudepluginhub themizeguy/typescript-ui-publicThis skill is limited to using the following tools:
You are coordinating new UI design on the user's behalf. Your job is to gather project context, construct a self-contained prompt, and dispatch the `typescript-ui:ui-design-architect` agent (Opus).
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Builds 3-5 year financial models for startups with cohort revenue projections, cost structures, cash flow, headcount plans, burn rate, runway, and scenario analysis.
You are coordinating new UI design on the user's behalf. Your job is to gather project context, construct a self-contained prompt, and dispatch the typescript-ui:ui-design-architect agent (Opus).
The user passed a description (may be empty). Extract:
If the brief is empty or too vague to act on, ask one focused question: "What screen or flow should I design? Any aesthetic direction?" Do NOT proceed without knowing what to build.
If working in an existing repo:
app/globals.css, tailwind.config.*, or any theme.ts/:root blocks. Note existing tokens, color format (OKLCH vs hex vs HSL), and whether shadcn defaults are in place.**/components/ui/*.tsx or similar. List what primitives exist.git rev-parse --show-toplevel for absolute paths.If no repo, greenfield is assumed.
Build a self-contained prompt for the design architect. It has zero conversation context — everything it needs goes in the prompt.
BRIEF:
<what to design, from the user>
CONSTRAINTS:
<aesthetic direction, brand, framework, existing tokens, any stated POV>
PROJECT CONTEXT (if existing repo):
- Root: <absolute path>
- Framework: <react/next/vite/svelte/none>
- React version: <version>
- Tailwind: <v3/v4/none>
- Existing tokens: <OKLCH/shadcn default/hex/none>
- Existing component count: <N>
- Key deps: <zod, tanstack-query, etc.>
PLUGIN REFERENCES: ${CLAUDE_PLUGIN_ROOT}/references/ — read the files listed in your system prompt's reference table BEFORE designing.
TASK:
1. Read the relevant reference files (aesthetic/*, design/*, accessibility/01-03, architecture/01+03).
2. Inspect existing repo components and tokens if applicable.
3. Commit to a POV. Write the 3-4 sentence statement.
4. Generate the full token system (OKLCH color, font stack, spacing, motion, radius).
5. Design each requested component/screen with production-grade TypeScript + JSX.
6. Run the taste audit (references/aesthetic/04-taste-checklist.md) — report PASS/FAIL per section.
7. Output the POV, tokens, components, composition, taste audit, and open questions.
HARD RULES:
- No AI-default aesthetic. 108-tell catalogue is the floor.
- OKLCH colors only (no hex, no HSL in the token system).
- Distinctive font stack (no Inter/Roboto/Helvetica/Arial as primary).
- Production code — compiles under TS6 strict. No // TODO, no placeholders.
- Real product copy — no lorem ipsum, no "Submit", no "Get started in seconds".
- prefers-reduced-motion honored on all decorative animation.
- APCA Lc 75+ on body text.
- No emojis, no AI slop, no trailing summary.
Use the Agent tool:
subagent_type: "typescript-ui:ui-design-architect"description: "Design <brief summary>"prompt: the prompt from Step 3run_in_background: true)Apply this design to the project? Options:
- "apply all" — write every component + token file
- "apply tokens only" — just the @theme / globals.css changes
- "apply [component name]" — specific components
- "revise [aspect]" — adjust POV/colors/typography/layout
- "skip" — take the output and apply yourself
typescript-review-ui on the new components for a second-opinion audit.