메뉴
Build and refine user interfaces with Tailwind CSS. Use when the user asks to build, design, style, or refine web UI — landing pages, dashboards, marketing sections, forms, buttons, cards, pricing tables, hero sections, testimonials, or Tailwind markup cleanup. Generates multiple design variations on exploratory requests.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Guide any engineering task — building, fixing, expanding, refactoring, investigating — like a senior engineer at a big company. Teaches the thinking process, not just rules. Study first, plan properly, implement with discipline. Use this skill whenever the user mentions "follow the patterns", "replicate the architecture", "proper system design", "production-ready plan", "do it properly", "don't hardcode", "build it like they would", "find the root cause", "fix it properly", "don't just patch it", "expand this feature", "refactor this", "how does this work", or asks for any engineering work to follow existing conventions exactly. Also trigger when the user is frustrated that previous work was half-baked, used hardcoded values, created workarounds, suppressed lints, or didn't follow the repo's architecture. Even if the user just says "plan this properly" or "I want it done right" or "check the codebase first", use this skill. When in doubt, prefer this skill — studying the codebase first never makes anything wo
Audit an implementation plan for Accessibility compliance. Use this skill when the user says "audit for accessibility", "a11y review this plan", "check accessibility", or any plan that adds interactive UI — buttons, dialogs, modals, forms, panels, trees, tabs, drag-and-drop, or custom widgets. Developer tools are notoriously poor at accessibility. This lens catches missing ARIA labels, broken keyboard navigation, trapped focus, insufficient contrast, and missing screen reader announcements that no other audit will find because they require thinking like a user who can't see the screen or use a mouse.
Audit an implementation plan through the eyes of a senior Backend/Rust Engineer. Use this skill when the user says "audit as backend", "backend review this plan", "review the Rust code", or any plan that involves Tauri commands, Rust crates, IPC protocol, sidecar processes, file system operations, terminal management, or backend state. This lens catches unsafe Rust patterns, error handling gaps, resource leaks, concurrency issues, and IPC protocol mistakes that frontend-focused audits miss entirely.
Audit an implementation plan through the eyes of a Design Engineer. Use this skill when the user says "audit as design engineer", "design review this plan", "review the design aspects", or any plan that involves UI changes, component styling, visual states, dark mode, colors, typography, spacing, or animations. Also trigger when reviewing plans that touch CSS, Tailwind classes, design tokens, or component visual structure. This lens catches visual inconsistencies, design system violations, and craft issues that other audits miss entirely.
Audit an implementation plan through the eyes of a Developer Experience (DX) Engineer. Use this skill when the user says "audit as DX", "DX review this plan", "review the developer experience", or any plan that adds user-facing features to a developer tool — CLI commands, error messages, configuration, onboarding, keyboard shortcuts, tool output, or API surfaces. Orbit is a developer tool; its users are developers. This lens catches the usability issues specific to developer tools that generic UX audits miss because they don't think like a developer using a tool.
Audit an implementation plan through the eyes of a senior Frontend Engineer. Use this skill when the user says "audit as frontend", "frontend review this plan", "review the React code", or any plan that involves React components, hooks, state management, Zustand stores, TypeScript types, CSS/Tailwind, bundle optimization, or rendering performance. This lens catches React anti-patterns, state management issues, type safety gaps, unnecessary re-renders, and bundle bloat that generalist audits miss.
| name | ui |
| description | Build and refine user interfaces with Tailwind CSS. Use when the user asks to build, design, style, or refine web UI — landing pages, dashboards, marketing sections, forms, buttons, cards, pricing tables, hero sections, testimonials, or Tailwind markup cleanup. Generates multiple design variations on exploratory requests. |
This skill helps you build user interfaces with Tailwind CSS — from full landing pages to individual components, from scratch or by refining existing designs.
If the user runs /ui with no additional input, introduce the skill by explaining the kinds of things it's good for. Don't present a menu or ask what they want to do — just help them understand what's possible so they can come back with a specific request.
Good for:
Mention a few example prompts they might try:
Keep it conversational and brief — this is orientation, not documentation.
Route the request by loading the appropriate supporting files before doing any implementation work.
Based on the user's prompt, load any of these files that feel relevant:
design-guidelines.md — index of design and coding rules with a directory of specific guideline files for components (buttons, forms, headers, pricing cards, testimonials, etc.), font recommendations, general markup/Tailwind authoring rules, and more. Load this for any UI work, then load the specific guideline files it points to.ui-picker.md — workflow for generating multiple design variations the user can compare and choose from. Default to using this for any open-ended or exploratory request — if the user is designing something new, asking for ideas, or the request has room for interpretation, generate multiple concepts and let them pick. Only skip it when the user is asking for a specific, unambiguous change.finalize.md — workflow for cleaning up, componentizing, and organizing UI code. Only activate when the user explicitly asks to organize, componentize, or extract components — not during regular UI building.| Prompt | Files to load |
|---|---|
| "Build a landing page for a SaaS product" | design-guidelines.md, general, landing-pages, headers, heading-groups, buttons, feature-lists, pricing-cards, testimonials, footers, typography |
| "Show me 3 different hero layouts" | design-guidelines.md, general, heading-groups, buttons, images, section-layout, typography, ui-picker.md |
| "Add dark mode to this page" | design-guidelines.md, general, colors, dark-mode |
| "Clean up the Tailwind in this file" | design-guidelines.md, general |
| "Componentize this page" | finalize.md, design-guidelines.md, general |
| "Build a dashboard with a sidebar" | design-guidelines.md, general, dashboards, headers, surfaces, typography |
/ui/ui is used for something clearly unrelated to UI work, explain what the skill is for and ask the user to clarify