Loading...
Loading...
Found 24 Skills
Build a throwaway prototype to flush out a design before committing to it. Routes between two branches — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route. Use when the user wants to prototype, sanity-check a data model or state machine, mock up a UI, explore design options, or says "prototype this", "let me play with it", "try a few designs".
Use when the user wants to design a mobile app, create screens, build UI, or interact with their Sleek projects — whether high-level ("design an app that does X") or specific ("list my projects", "create a new project", "screenshot that screen").
Sketch a UI design as a throwaway `.openui` file in `docs/prototype/` for the developer to render live in the Genui VS Code extension. Use when the user wants to see a design, sketch a screen, mock up a layout, compare a few options, or says "genui this", "sketch a [page]", "mock up [thing]", "let me see a few options", "prototype this design", "draft a UI". This is specifically for visual UI mockups rendered by the Genui extension, not terminal logic prototyping.
This skill generates text-based UI wireframes using .kui file syntax. Use when creating wireframes, mockups, or UI layout diagrams. The skill converts .kui files to SVG/PNG images via the katsuragi CLI tool.
General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.
Direct-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive structure before visual design. Use when the user explicitly invokes html-wireframe or the broad html skill routes a wireframe request here. Do not activate independently from a general request. Do not use for polished mockups or production-like interaction; use html-prototype for those.
Use when you need to ship a single PR-sized feature end-to-end (plan -> implement -> verify) with artifacts. Ship core product features quickly in a Next.js codebase: turn a feature idea into an executable plan, implement in PR-sized slices, and keep artifacts under runs/ (or OpenSpec changes/ when available). Supports plan-only mode for early scoping. For prototype UI work, include a demo-ready wow moment (animation/micro-interaction) by default unless user opts out.
[user/auto] 비교로 불확실성을 줄일 수 있을 때 disposable UI 또는 logic prototype을 만들고 실행한다. production implementation이나 대화형 아이디어 탐색에는 적용하지 않는다.
Prototype Design Skill
Professional UI design and frontend interface guidelines. Use this skill when creating web pages, mini-program interfaces, prototypes, or any frontend UI components that require distinctive, production-grade design with exceptional aesthetic quality.
Create polished design artifacts as self-contained HTML — UI mockups, interactive prototypes, wireframes, landing pages, dashboards, app screens, mobile apps, and slide decks. Use this skill whenever the user wants to design, mock up, prototype, wireframe, or visualize any interface, screen, flow, or visual artifact — even when they don't say the word "design" (e.g. "build me a landing page", "show me what a settings screen could look like", "prototype an onboarding flow", "wireframe a few layout ideas", "make a pitch deck"). It drives a full design process: clarifying questions, design-context gathering, and production of one or more HTML deliverables. Runs on portable agent harnesses including Claude Code, Cursor, and Codex Agent — harness-specific tools are resolved from references/.
DESIGN-CATALOG