Loading...
Loading...
Found 27 Skills
Personal TypeScript and development preferences — package managers, tech stack defaults, command policies, and code style rules. Apply when working in any TypeScript/JavaScript project to enforce these conventions.
Create polished, intentional frontend interfaces. Use this skill when building any UI — dashboards, admin panels, landing pages, marketing sites, or web applications. Routes to specialized guidance based on context.
Use when work must be verified in local Canvas Workbench, or when the user asks to run, open, or check a component in Workbench. Verifies that Canvas Workbench is available through the project's package runner, starts the local Workbench dev server, and keeps Workbench verification as part of the implementation workflow.
Frontend structure worker: SCAFFOLD new React project or RESTRUCTURE existing monolith to component-based architecture
Generate UI design contract (UI-SPEC.md) for frontend phases
Use when adding new error messages to React, or seeing "unknown error code" warnings.
Visual design system patterns for web UIs — layout, responsive, Tailwind tokens. Use when implementing visual designs, working with CSS/Tailwind, or building responsive layouts.
promo-video/ 配下のRemotion動画プロジェクト専用。TikTok縦型プロモ動画のシーン作成・ 編集・レンダリングワークフローを提供する。promo-video/ 内のファイルを触る作業や、 Remotionコンポーネントの追加・修正で使うこと。 汎用的な動画編集やTikTok一般の質問には対応しない。
Use when creating Storybook stories, naming story exports, organizing story files, or reviewing story naming conventions. Ensures story names describe user scenarios and component states rather than implementation details.
Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions. Also for starting or previewing Storybook to verify UI, requests to show, browse, or list components, stories, or UI states, and docs, props, or usage lookups.
Manage shadcn/ui components using MCP tools. Use when user needs to: (1) Add new shadcn components to a project (2) Build complex UI features requiring multiple components (3) Research component implementations and examples (4) Get component installation commands Triggers: "add shadcn", "shadcn component", "build UI with shadcn", "install component", "create form", "create dialog"
Full spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run. Writes `.ui-craft/spec.md`. Run when starting a net-new surface from scratch. Invoke when the user asks for sddesign on their UI, or mentions 'sddesign' alongside design / UI / frontend work.