Skills

Skills are pre-built instruction sets that tell the agent how to produce a specific output type. Each skill is a folder containing a SKILL.md with structured directives, optional reference files, and pre-flight checklists. The agent reads the skill's instructions alongside the active design system and your brief to produce the artifact.

How Skills Work

When you select a skill and submit a brief:

1. The Desktop app's background service resolves the skill folder and reads SKILL.md.
2. The prompt composer stacks: discovery directives → design system → craft rules → skill body → project metadata.
3. The agent follows the skill's pre-flight checklist (P0/P1/P2 gates) before emitting.
4. The artifact is rendered in the sandboxed preview iframe.

Skills are portable Markdown files. They do not contain code logic — they contain instructions, references, and validation rules.

Skill Categories

Skills are grouped by scenario:

Category	Description	Example Skills
Design	Visual design, UI, and prototyping	web-prototype, saas-landing, dashboard, pricing-page, docs-page, mobile-app, mobile-onboarding, wireframe-sketch
Marketing	Marketing and growth content	email-marketing, social-carousel, magazine-poster, blog-post
Engineering	Technical documentation and specs	pm-spec, eng-runbook, kanban-board
Product	Product management artifacts	team-okrs, meeting-notes
Finance	Financial documents	finance-report, invoice
HR	Human resources materials	hr-onboarding
Operation	Operational templates	weekly-update (deck)
Personal	Personal productivity	weread-year-in-review
Sale	Sales enablement	gamified-app

Showcase Skills

Prototype Skills

Skill	Output
web-prototype	General-purpose web screen
saas-landing	SaaS landing page with hero, features, pricing
dashboard	Analytics or admin dashboard
pricing-page	Pricing comparison table
docs-page	Documentation-style page
blog-post	Long-form article or blog post
mobile-app	Mobile app screen
mobile-onboarding	Multi-step mobile onboarding flow
gamified-app	Gamified interactive experience
wireframe-sketch	Low-fidelity wireframe
redesign	Redesign an existing screen from screenshot
critique	Run a 5-dimensional critique on an artifact
tweaks	AI-emitted parameter panel for fine-tuning

Deck Skills

Skill	Output
guizang-ppt	Default full-deck template (bundled)
simple-deck	Clean, minimal presentation
replit-deck	Developer-focused presentation
weekly-update	Team status update deck

Document Skills

Skill	Output
pm-spec	Product specification document
team-okrs	Quarterly OKRs worksheet
meeting-notes	Meeting notes template
kanban-board	Kanban task board
eng-runbook	Engineering runbook
finance-report	Financial summary report
invoice	Invoice template
hr-onboarding	HR onboarding document

Creative & Animation Skills

Skill	Output
motion-frames	Animated motion frames
sprite-animation	CSS sprite animation
magazine-poster	Magazine-style poster layout
social-carousel	Social media carousel slides
digital-eguide	Digital e-guide

Integration Skills

Skill	Output
figma-code-connect-components	Connect Figma components to code
figma-create-design-system-rules	Generate DESIGN.md from Figma file
figma-generate-design	Generate design from Figma input
figma-implement-design	Implement a Figma design in code
image-to-code	Convert a screenshot to code
mockup-device-3d	3D device mockup

Using Skills

1. On the entry view, browse the Skills tab.
2. Filter by category or search by name.
3. Click a skill to select it — the brief input updates with the skill's example prompt.
4. Type your brief and press ⌘/Ctrl+Enter.

You can also start from the Templates tab if you want the agent to personalise a pre-built artifact rather than generating from scratch.

Skill Structure

Each skill folder contains:

File	Purpose
SKILL.md	Main instruction file with directives, pre-flight checklist, and artifact format
references/checklist.md	P0/P1/P2 validation gates the agent must pass before emitting
references/*.md	Additional reference material (examples, patterns, anti-patterns)
assets/template.html	Optional seed template the agent reads as a starting point
example/	Example prompts and expected output

Creating Custom Skills

Skills are portable Markdown files. To create a custom skill:

1. In the Desktop app, create a skill folder (named with your skill slug) under the skills directory.
2. Write a SKILL.md with your instructions.
3. Add a references/checklist.md with validation gates.
4. Optionally include a seed assets/template.html.

Custom skills appear in the skills picker alongside built-in ones.