78 skills across two editions

setup-astro

Start a new Astro v7 project with Tailwind v4.

setup-html

Start a vanilla HTML project (Vite + TypeScript) with Tailwind v4.

setup-react

Start a React (Vite + TanStack Router) project with Tailwind v4.

mockup-pipeline

Setup → DESIGN.md → type scale → mockup, end to end.

One of

setup-astrosetup-htmlsetup-react

Required

create-design-mdtailwind-typescale

One of

create-mockupcreate-multi-mockup

Optional

japanese-web-guidelinecognitive-ui-design

full-pipeline

mockup-pipeline, then mobile-polish, tailwind-review, astro-doctor (Astro projects) and a fresh DESIGN.md.

Required

mockup-pipelinemobile-polishtailwind-reviewcreate-design-md

Optional

astro-doctorcode-to-figma

Also needs everything mockup-pipeline depends on.

lp-pipeline

A landing-page pipeline that pre-selects sections from your purpose and target.

One of

setup-astrosetup-htmlsetup-react

Required

create-mockuptailwind-reviewmobile-polish

Optional

japanese-web-guidelinecognitive-ui-designcode-to-figma

brief-me

A business-requirements interview that writes BRIEF.md.

create-mockup

Builds a UI from scratch, no Figma needed.

Optional

brief-mecode-to-figmajapanese-web-guidelinecognitive-ui-designjapanese-lp-seasoning

create-multi-mockup

Several structurally different layouts side by side.

Optional

create-mockupbrief-mejapanese-web-guidelinecognitive-ui-designjapanese-lp-seasoning

create-jp-lp

For Japanese commercial landing pages. Its SKILL.md is in Japanese.

Required

create-mockup

Optional

brief-mejapanese-web-guidelinecognitive-ui-designjapanese-lp-seasoning

mobile-polish

Mobile navigation, small-screen type and touch targets.

create-design-md

Generates a DESIGN.md in Google’s design.md format.

export-design-md

Turns DESIGN.md into a visual HTML or Astro page.

rewrite-me

Rewrites page copy to match BRIEF.md.

Required

brief-me

Optional

japanese-web-guideline

If BRIEF.md already exists in the project, brief-me does not need to be installed.

figma-audit

Scores how well AI can implement a frame (4 dimensions) and writes a report.

figma-component-audit

Audits component structure and variants.

figma-weather

The figma-audit score, delivered as a weather forecast.

figma-layer-rename

Replaces auto-generated layer names with semantic ones, after confirmation.

figma-tidy-up

Rebuilds a frame with no auto layout into a clean auto-layout hierarchy.

Optional

figma-tokenize

figma-tokenize

Turns hardcoded colors, font sizes and spacing into bound variables.

Optional

figma-layer-rename

figma-componentize

Finds repeated patterns and builds components and variants, with your confirmation.

Optional

figma-tokenize

figma-enhance

Audits an already structured file for further improvements and applies what you approve.

figma-optimize

Pick which of the five clean-up tasks to run; they run in dependency order.

Required

figma-tidy-upfigma-layer-renamefigma-tokenizefigma-componentizefigma-enhance

Calls only the tasks you select. Install them all in the same place.

figma-contrast-check

WCAG AA/AAA contrast per text node, with confirmation-gated auto-fix.

figma-to-tailwind

Figma Variables → Tailwind @theme tokens.

tailwind-to-figma

Tailwind @theme tokens → Figma Variables.

figma-workflow

Figma to working code via sub-agents (implement, review, optimize).

Optional

tailwind-reviewfigma-update-checker

If tailwind-review is not installed, the Tailwind review phase is skipped and the run continues.

figma-pipeline

Figma to a running page: starter, variable sync and implementation in one go.

Required

figma-workflowfigma-to-tailwindcreate-design-md

Optional

figma-audittailwind-to-figma

Also needs everything figma-workflow depends on. figma-to-tailwind, tailwind-to-figma and create-design-md are also bundled with the starter it clones.

figma-update-checker

Detects whether a Figma node changed since the last check.

Optional

figma-workflowfigma-pipelinefigma-update-patch

figma-update-patch

Patches only the part that changed instead of rebuilding the page.

Required

figma-update-checker

code-to-figma

Sends implemented code back to Figma, from a quick capture to full components.

figma-node-checkDeprecated

Deprecated — folded into each skill that used it, as references/known-pitfalls.md.

css-to-tailwind

A fast first pass from plain CSS or Sass to Tailwind v4, with a list of what still needs manual work.

Optional

tailwind-review

tailwind-review

Review, v3 → v4 migration and accessibility structure checks (code already on Tailwind).

tailwind-typescale

Apply a base size and a named ratio to @theme.

astro-i18n

Locale routing, translation dictionary and language switcher for an existing Astro project.

html-to-astro

Migrate a plain-HTML project into Astro v7 with Tailwind v4.

Required

setup-astro

Optional

astro-doctorcss-to-tailwind

If the source does not use Tailwind yet, run css-to-tailwind first.

astro-doctor

Astro spec compliance and component granularity.

japanese-web-guideline

Implementation rules for Japanese-language sites.

cognitive-ui-design

Breaks generic layout and color defaults using eye-tracking patterns.

japanese-lp-seasoning

Carousels, full-bleed, scroll animation and vertical text for landing pages.

click-to-fix

Click in the browser to give a visual fix instruction.

visual-polish

Screenshot-based self-correction, up to 5 rounds.

Optional

japanese-web-guideline

polish-me

Report-only design review: measures the running page (desktop + mobile) and pins numbered, evidence-based findings onto it. Edits no source files.

Optional

cognitive-ui-designrewrite-mecreate-jp-lpbrief-me

finish-me

A step-by-step finishing pass over an existing mockup.

Required

rewrite-memobile-polishclick-to-fixtailwind-review

Optional

astro-doctor

Also needs everything rewrite-me depends on.

a11y-review

Writes alt text by looking at the actual image, and fixes structural accessibility issues.

pipeline-thinking

A Socratic guide to how skills combine into pipelines.

pipeline-composer

Scans your installed skills and writes a PIPELINE.md proposal.