Skills

Framewerk ships a set of public skills: short instruction files that teach a coding agent how to design screens, plan apps, and generate valid Framewerk documents. They are a public good — installable without an account.

This page is for a developer putting them on a machine. Agents get the same install from the MCP server's connection instructions; you do not need both.

Install

One line per client. Each host discovers skills in its own directory — project-scoped (folder) or machine-wide (global) where the host has one.

Claude Code

mkdir -p .claude/skills && curl -fsSL https://airframe.to/skills/bundle.tar.gz | tar -xzf - -C .claude/skills --strip-components=1

Global: ~/.claude/skills instead of .claude/skills.

Codex

mkdir -p .agent/skills && curl -fsSL https://airframe.to/skills/bundle.tar.gz | tar -xzf - -C .agent/skills --strip-components=1

Global: ~/.codex/skills.

Cursor, Windsurf, GitHub Copilot

Project-scoped only — these hosts have no machine-wide skills directory:

mkdir -p .agent/skills && curl -fsSL https://airframe.to/skills/bundle.tar.gz | tar -xzf - -C .agent/skills --strip-components=1

Generic

Any host that can read a SKILL.md tree:

mkdir -p <your-skills-dir> && curl -fsSL https://airframe.to/skills/bundle.tar.gz | tar -xzf - -C <your-skills-dir> --strip-components=1

The tarball is a gzipped tar rather than a zip because curl | tar -xzf reads a pipe on macOS, Windows and Linux alike. Optionally filter with ?names=skill-a,skill-b.

Manifest

What exists, at what hash:

https://airframe.to/skills/manifest.json

The response's ETag is the bundle fingerprint — compare it later to tell "still current?" from "stale" without re-downloading. An install stamps the same fingerprint in .airframe-skills.json inside the skills directory.

Public skills

Only skills marked public ship in the bundle. Internal tooling skills are never listed here and are refused by the server even if named.

Each entry is one line: what it is for.

Design & screens

• airframe-guide — the primary reference for authoring screens, components, flows and specs through the MCP tools.
• app-capture — turn an existing app, screenshots or an interview into wireframes.
• app-planner — plan a new application from an idea into screens, requirements and flows.
• design-ideation — rapid brainstorming on boards that converge into production screens.
• design-review — async design review: workspace, before/after screenshots, structured feedback.
• screen-review — conversational critique of a single screen layout.
• ux-audit — automated usability and accessibility audit of wireframes.
• premium-design — production-grade visual quality with a brand-aware pipeline.
• brand-kit — generate a style system (tokens, light/dark) from a logo, palette or vibe.
• brand-definition — define brand identity, voice and visual principles before styling.
• style-system — create and manage design tokens and style rules.
• complex-component — build multi-item components (tab bars, lists, cards) with state.
• component-refactoring — convert existing React UI into reusable Framewerk components.
• hybrid-nav — adaptive navigation that works across mobile, tablet and desktop.
• mobile-app-design — phone and tablet screens: thumb reach, gestures, safe areas.
• motion-design — how a screen moves: entrances, transitions, reduced motion.
• dashboard-design — KPI tiles, stats and overview layouts.
• management-surfaces — settings pages, admin panels, forms and data tables.
• onboarding-design — first-run wizards, checklists and empty states.
• flow-builder — map and wire navigation flows between screens.
• wireframe-cleanup — audit and prune screens that are no longer necessary.
• wireframe-code-align — reconcile drifted wireframes with an existing codebase.
• landing-page-craft — above-the-fold marketing sections and hero blocks.
• digital-marketing — landing pages, emails, ads and conversion funnels.

Planning & requirements

• backlog-manager — triage requests into prioritized requirements, versions and boards.
• requirements-sync — extract structured requirements from prose, PRDs and notes.
• requirement-ingestion — turn a casual description of work into tracked requirements.
• feedback-triage — process feedback from docs, boards or calls into the backlog.
• conversation-capture — mine a conversation transcript for decisions and action items.
• build-review-triage — turn a review board into structured requirements.
• status-reconciler — catch requirement and brief statuses up with what actually shipped.
• project-manager — briefs, milestones, builds and day-to-day plan updates.
• project-orientation — read-only briefing on what a project is and where it stands.
• plan-integrity-audit — find where a plan's own data contradicts itself.
• qa-planner — design automated QA strategies from screens and flows.
• journal-craft — write structured journal entries for decisions and learnings.

Code & delivery

• feature-builder — generate production code for one screen or component.
• feature-executor — execute a feature brief end to end with TDD.
• site-generator — scaffold a whole site from a wireframe project.
• tdd — test-driven development workflow.
• test-generator — generate end-to-end tests from navigation flows.
• project-import — reverse-engineer wireframes from an existing codebase.
• cms-content — externalize strings to a content registry and set up locales.
• auth-architecture — design sessions, roles and API security for a SaaS app.
• code generation mapping lives in the Code generation guide, not as a skill.

Strategy & research

• digital-product-strategy — north-star framing, tradeoffs and success signals.
• gtm-strategy — go-to-market: positioning, channels, launch plan.
• behavioral-design — persuasion mechanics at decision points, with an ethics gate.
• concept-sprint — idea → ideate → wireframe → review in one automated pipeline.

Agents & MCP

• viewer-preview — connect a viewer app and preview wireframes.
• recipe-creator — capture a reusable UI or workflow pattern as a recipe.

Where to go next

• Agents & MCP — connect an agent and generate a screen.
• Quick Start — render a screen without any agent at all.