New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Ijfw UI Spec

by FerroxLabs in FerroxLabs/ijfw

A skill your agent uses when the user says: 'ui spec', 'design contract', 'ui audit setup', 'lock the design', 'visual contract', 'ui review setup', or '/ijfw-ui-spec'.

MITAuto-check: notesFrontend & Design

Install Ijfw UI Spec

skills CLI
$ npx skills add FerroxLabs/ijfw --skill ijfw-ui-spec -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install FerroxLabs/ijfw ijfw-ui-spec --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/FerroxLabs/ijfw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/claude/skills/ijfw-ui-spec .claude/skills/ijfw-ui-spec && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ijfw-ui-spec
GitHub stars
212
Token cost
~1.9k tokens
SKILL.md length
507 words
Files
1
Skills in repo
38
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when the user says: 'ui spec', 'design contract', 'ui audit setup', 'lock the design', 'visual contract', 'ui review setup', or '/ijfw-ui-spec'.

  • Works in 7 steps: Locate the active slice → Load context → Trigger ijfw-design if no design… → …
  • The user says: ui spec
  • SKILL.md covers When to fire, Process, Anti-patterns (do not do) and Success criteria
  • Calls git

What it does

Ijfw UI Spec is an agent skill from FerroxLabs/ijfw. Use when the user says: 'ui spec', 'design contract', 'ui audit setup', 'lock the design', 'visual contract', 'ui review setup', or '/ijfw-ui-spec'. Produces UI-SPEC.md as the visual design contract before any frontend or visual-artifact build, and dispatches ijfw-ui-auditor as the final 6-pillar gate.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering UI design. The repository describes itself as: IJFW — It Just Fcking Works. Ferrox Labs' local-first infrastructure for AI coding agents: shared memory, smart routing, multi-AI cross-audits, disciplined workflow. The licence is MIT.

When your agent uses it

  • The user says: ui spec
  • Design contract
  • Lock the design
  • Visual contract

Example prompts

  • “ui spec”
  • “design contract”
  • “ui audit setup”
  • “/ijfw-ui-spec”

Requirements

  • Pre-approved tools (allowed-tools): Read, Write, Bash, Grep, Glob, AskUserQuestion, Agent

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. Locate the active slice
  2. Load context
  3. Trigger ijfw-design if no design contract exists
  4. Generate critical-surface HTML mockups
  5. Write UI-SPEC.md
  6. Commit the contract
  7. After build lands -- dispatch ijfw-ui-auditor

What it can do on your machine

Read from SKILL.md and the folder at commit eda62f3. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Bash
    • Grep
    • Glob
    • AskUserQuestion
    • Agent

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • git

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Ijfw UI Spec loads about 1.9k tokens when it runs. Until then it costs about 79 tokens; SKILL.md has 507 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~79
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Write, Bash, Grep, Glob, AskUserQuestion, Agent

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from FerroxLabs/ijfw at commit eda62f3, republished under its MIT licence (© FerroxLabs). 507 words, ~1,868 tokens.

Download SKILL.mdSave it as .claude/skills/ijfw-ui-spec/SKILL.md (or your agent's skills folder).
name
ijfw-ui-spec
description
Use when the user says: 'ui spec', 'design contract', 'ui audit setup', 'lock the design', 'visual contract', 'ui review setup', or '/ijfw-ui-spec'. Produces UI-SPEC.md as the visual design contract before any frontend or visual-artifact build, and dispatches ijfw-ui-auditor as the final 6-pillar gate.
allowed-tools
Read, Write, Bash, Grep, Glob, AskUserQuestion, Agent
since
1.5.0

IJFW UI-Spec -- lock the visual contract before build

Produce .planning/<milestone>/<phase>/UI-SPEC.md as the design contract for the active slice, then dispatch ijfw-ui-auditor as the final 6-pillar gate after implementation lands.

Domain-agnostic. Same flow for: a web UI slice ("settings page"), a book chapter layout ("Ch4 spread + typography"), a campaign deck ("launch deck 8 slides"), a brand system ("v2 token refresh"). UI-SPEC.md is the visual counterpart to SPEC.md.

When to fire

  1. User explicitly asks: "ui spec", "design contract", "ui audit setup", "lock the design", or invokes /ijfw-ui-spec.
  2. ijfw-workflow Deep path enters a frontend or visual-artifact build with no UI-SPEC.md present.
  3. plan-phase is requested for a slice tagged ui:* or visual:* and no UI-SPEC.md exists.

Process

1. Locate the active slice
bash
MILESTONE=$(cat .ijfw/state/active-milestone 2>/dev/null \
  || ls -1 .planning/ | grep -E '^[0-9]' | tail -1)
PHASE=$(cat .ijfw/state/active-phase 2>/dev/null || echo "$1")
PHASE_DIR=".planning/${MILESTONE}/${PHASE}"
MOCKUP_DIR="${PHASE_DIR}/mockups"
mkdir -p "$PHASE_DIR" "$MOCKUP_DIR"

If $PHASE is unset and no argument supplied, ASK which slice to spec. Never guess.

2. Load context

Read in order, skipping any that don't exist:

  1. .ijfw/memory/brief.md -- the original ask
  2. DESIGN.md -- existing design contract (root)
  3. .planning/<milestone>/<phase>/SPEC.md -- locked WHAT for this slice
  4. .planning/<milestone>/<phase>/CONTEXT.md -- discuss-phase decisions
  5. Any prior UI-SPEC.md in earlier slices of this milestone
  6. .planning/PROJECT.md -- non-negotiables

Extract: brand direction, declared surfaces, prior token decisions, the critical surfaces that must visualise.

3. Trigger ijfw-design if no design contract exists

If neither DESIGN.md nor a prior UI-SPEC.md lives in the repo, defer to the ijfw-design skill to pick a direction (brand / template / blank slate) and persist DESIGN.md. Resume from Step 4 once design pass landed.

4. Generate critical-surface HTML mockups

Identify 1-3 critical surfaces from SPEC.md acceptance criteria (e.g. the empty dashboard, the destructive-confirm modal, the cover spread, the opening slide). For each, write a standalone HTML file to:

$MOCKUP_DIR/<surface-name>/index.html

Use real tokens from DESIGN.md -- real colors, real type scale, real spacing, real content. ASCII wireframes are not acceptable here; this is the contract the auditor will grade against.

If the ijfw-design skill is available, invoke it via the skill router and pass the surface list. Otherwise produce mockups inline using DESIGN.md tokens.

Optional live preview:

bash
ijfw design start --no-open 2>/dev/null && \
  ijfw design push "$MOCKUP_DIR"/*/index.html
Show full SKILL.md (178 more words)Show less
5. Write UI-SPEC.md

Write to $PHASE_DIR/UI-SPEC.md:

markdown
# UI-SPEC -- <milestone> / <phase>
**Locked:** <ISO date>  **Status:** Ready for build  **Auditor:** ijfw-ui-auditor

## 1. Layout & Hierarchy
- **Primary surfaces:** <list>
- **Focal point per surface:** <where the eye lands first>
- **Breakpoints:** <e.g. 375 / 768 / 1440 -- or N/A for print>
- **Grid / column structure:** <12-col, asymmetric, single-column, etc>

## 2. Typography & Reading Flow
- **Font stack:** <heading / body / mono>
- **Type scale:** <list of allowed sizes -- e.g. 12 / 14 / 16 / 20 / 28 / 40>
- **Weights:** <list of allowed weights -- e.g. 400 / 600>
- **Line-height + measure:** <body line-height, max line length>

## 3. Color & Contrast (WCAG AA, 4.5:1 body / 3:1 large)
- **Tokens:** <fg / bg / accent / muted / destructive -- hex values>
- **60 / 30 / 10 distribution:** <dominant / secondary / accent>
- **Contrast pairs:** <list each pair with measured ratio>
- **Dark mode policy:** <required / optional / N/A>

## 4. Spacing & Rhythm
- **Spacing scale:** <e.g. 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64>
- **Arbitrary values policy:** <forbidden | exceptions list>
- **Vertical rhythm:** <baseline grid, section spacing>

## 5. Component Consistency
- **Design system / registry:** <shadcn | custom | next-forge | none>
- **Components in use:** <button, modal, table, etc -- the closed set>
- **Variants per component:** <e.g. button: primary / secondary / ghost / destructive>
- **Tokens applied:** <how components consume the token set>

## 6. Interaction & Motion
- **States covered per interactive element:** default / hover / focus /
  active / disabled / loading / error / empty
- **Motion budget:** <duration cap, easing, reduced-motion fallback>
- **Destructive-action pattern:** <confirm modal | undo | type-to-confirm>

## Critical Surfaces (Auditor evidence targets)
| Surface | Mockup | What the auditor MUST check |
|---|---|---|
| <name> | `mockups/<name>/index.html` | <one-line check> |

## Copywriting Contract
- **CTAs:** <exact strings -- "Save changes" not "Submit">
- **Empty states:** <surface -> copy>
- **Error states:** <surface -> copy>

## Registry Safety (if shadcn or third-party blocks in use)
| Block | Registry | Reviewed? |
|---|---|---|
| <block> | <url> | <yes/no> |

## Out of Scope (Deferred to later slice)
- <intentionally not addressed this slice>

## Canonical References
- DESIGN.md
- SPEC.md (`<path>`)
- CONTEXT.md (`<path>`)
6. Commit the contract
bash
git add "$PHASE_DIR/UI-SPEC.md" "$MOCKUP_DIR"
git commit -m "ui-spec($PHASE): lock visual contract before build"
7. After build lands -- dispatch ijfw-ui-auditor

Once implementation commits land for this slice (executor reports DONE), dispatch the auditor as the final visual gate:

Task: ijfw-ui-auditor
Args:
  phase: $PHASE
  ui_spec_path: $PHASE_DIR/UI-SPEC.md
  source_scope: <comma-separated dirs, e.g. src,app,components>
  dev_server_url: <optional, e.g. http://localhost:3000>

Wait for the auditor. It writes $PHASE_DIR/UI-REVIEW.md with per-pillar PASS / FLAG / BLOCK verdicts. Surface its top-level verdict to the user:

  • PASS -- ship is unblocked.
  • FLAG -- ship may proceed; record follow-ups in CONTEXT.md.
  • BLOCK -- ship is blocked; fix and re-dispatch the auditor.

Anti-patterns (do not do)

  • Do NOT write UI-SPEC.md without DESIGN.md tokens -- the contract has nothing to enforce.
  • Do NOT produce ASCII wireframes as the critical-surface mockups; they defeat the auditor's evidence loop.
  • Do NOT skip dispatching ijfw-ui-auditor after build -- the contract without the gate is half-shipped.
  • Do NOT include implementation details (component code, framework choices); those belong to plan-phase output.

Success criteria

  • UI-SPEC.md exists at .planning/<milestone>/<phase>/UI-SPEC.md.
  • All 6 pillars populated with concrete values (no TBDs).
  • At least one critical-surface HTML mockup written under mockups/.
  • Contract commit landed on the active branch.
  • ijfw-ui-auditor dispatched after the build commit and verdict surfaced to the user.

© FerroxLabs, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in claude/skills/ijfw-ui-spec of FerroxLabs/ijfw.

Open the folder on GitHubat commit eda62f3

Compare with similar skills

Ijfw UI Spec next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Ijfw UI Spec compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ijfw UI Spec this skillFerroxLabs/ijfw212—~1.9kAutomated safety check: NotesMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro MaxZxBing0066/pixel-converter18113 repos~2.6kAutomated safety check: NotesBSD-2-Clause
Design Dnazanwei/design-dna1.9k1 repos~2.1kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • LobeHub Interactive Prototype

    lobehub/lobehub

    Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    ZxBing0066/pixel-converter

    UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.

    181 GitHub starsUsed in 13 repos~2.6k tokens
    Frontend & DesignAuto-check: notes

  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Figma Design to Code

    warpdotdev/warp

    Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

    65k GitHub starsUsed in 4 repos~2.9k tokens
    Frontend & DesignAuto-check passed

More from FerroxLabs/ijfw

All 38 skills in this repo

  • Ijfw Agents Md

    FerroxLabs/ijfw

    Maintain canonical AGENTS.md (open spec). An agent skill from FerroxLabs/ijfw.

    212 GitHub stars~2.7k tokensUpdated 4 days ago
    Auto-check passed

  • Ijfw Design

    FerroxLabs/ijfw

    A skill your agent uses when the user says: 'design', 'redesign', 'UI', 'UX', 'dashboard', 'page', 'component', 'make it look better', 'polish', 'pretty', 'professional', 'user experience'…

    212 GitHub stars~2.2k tokensUpdated 4 days ago
    Auto-check passed

  • Ijfw Complete Milestone

    FerroxLabs/ijfw

    A skill your agent uses when a milestone is shipping and you need to archive its artifacts, generate a summary, and seed the next milestone.

    212 GitHub stars~1.5k tokensUpdated 4 days ago
    Auto-check passed

  • Ijfw Critique

    FerroxLabs/ijfw

    Challenge decisions, surface counter-arguments, flag assumptions.

    212 GitHub stars~1.2k tokensUpdated 4 days ago
    Auto-check passed

  • Ijfw Cross Audit

    FerroxLabs/ijfw

    Generate a cross-platform multi-model audit (Trident) on a diff, brief, or artifact.

    212 GitHub stars~594 tokensUpdated 4 days ago
    Auto-check passed

  • Ijfw Debug

    FerroxLabs/ijfw

    Root-cause analysis with hypothesis tracking. An agent skill from FerroxLabs/ijfw.

    212 GitHub stars~578 tokensUpdated 4 days ago
    Auto-check passed

Categories

Questions about Ijfw UI Spec

What does Ijfw UI Spec do?

A skill your agent uses when the user says: 'ui spec', 'design contract', 'ui audit setup', 'lock the design', 'visual contract', 'ui review setup', or '/ijfw-ui-spec'. Ijfw UI Spec is an agent skill from FerroxLabs/ijfw. Use when the user says: 'ui spec', 'design contract', 'ui audit setup', 'lock the design', 'visual contract', 'ui review setup', or '/ijfw-ui-spec'.

When should I use Ijfw UI Spec?

Ijfw UI Spec fits situations like: the user says: ui spec; design contract; lock the design; visual contract.

How do I install Ijfw UI Spec in Claude Code?

Run `npx skills add FerroxLabs/ijfw --skill ijfw-ui-spec -a claude-code`. Or copy the skill folder (claude/skills/ijfw-ui-spec in FerroxLabs/ijfw) into .claude/skills/ijfw-ui-spec in your project. Claude Code loads it when a task matches its description.

How do I install Ijfw UI Spec in Codex?

Run `npx skills add FerroxLabs/ijfw --skill ijfw-ui-spec -a codex`. Or copy the skill folder (claude/skills/ijfw-ui-spec in FerroxLabs/ijfw) into .agents/skills/ijfw-ui-spec in your project. Codex loads it when a task matches its description.

Can I use Ijfw UI Spec in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add FerroxLabs/ijfw --skill ijfw-ui-spec -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ijfw-ui-spec, .gemini/skills/ijfw-ui-spec, .github/skills/ijfw-ui-spec and .opencode/skills/ijfw-ui-spec in your project.

What does Ijfw UI Spec need to run?

Going by SKILL.md and its folder, Ijfw UI Spec needs the command-line tools its instructions call (git). Its frontmatter pre-approves these tools: Read, Write, Bash, Grep, Glob, AskUserQuestion, Agent.

Does Ijfw UI Spec access the network?

SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Ijfw UI Spec safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Ijfw UI Spec use?

Ijfw UI Spec is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Ijfw UI Spec use?

About 1.9k tokens (SKILL.md is roughly 7.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Ijfw UI Spec?

Skills that share tags, products or a category with Ijfw UI Spec: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ijfw UI Spec?

FerroxLabs (a GitHub user) maintains it in FerroxLabs/ijfw, which has 212 GitHub stars. The repository holds 38 skills in this directory. The repository was last updated on October 5, 2026.

Source: FerroxLabs/ijfw on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.