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 Design

by FerroxLabs in 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'…

MITAuto-check passedFrontend & Design

Install Ijfw Design

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

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

GitHub CLI
$ gh skill install FerroxLabs/ijfw ijfw-design --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/codex/skills/ijfw-design .claude/skills/ijfw-design && 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-design
GitHub stars
212
Token cost
~2.2k tokens
SKILL.md length
1,140 words
Files
31 (incl. scripts)
Skills in repo
38
Repo updated
First seen
Licence
MIT

At a glance

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'…

  • Works in 4 steps: Check DESIGN.md → No DESIGN.md: Three-Option Picker → Dispatcher → …
  • The user says: design
  • SKILL.md covers Rule 0 - Real HTML mockups,…, Live Visual Loop, Durable Design Intelligence… and Step 1 - Check DESIGN.md, plus 5 more sections
  • Runs Shell and JavaScript scripts from its folder; calls node

What it does

Ijfw Design is an agent skill from FerroxLabs/ijfw. Use when the user says: 'design', 'redesign', 'UI', 'UX', 'dashboard', 'page', 'component', 'make it look better', 'polish', 'pretty', 'professional', 'user experience', 'layout', 'visual', 'accessibility', 'colors', 'typography', 'brand'.

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 34 other files, including scripts (for example `README.md`, `data/brand-atlas.json` and `scripts/design-pass.sh`).

It sits in Frontend & Design, covering UI design, Typography and UX 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: design
  • Make it look better
  • User experience

Example prompts

  • “design”
  • “redesign”
  • “dashboard”
  • “/ijfw-design”

Requirements

  • Node.js
  • A Bash shell

Workflow steps

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

  1. Check DESIGN.md
  2. No DESIGN.md: Three-Option Picker
  3. Dispatcher
  4. IJFW Constraint Layer

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 nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 3 files in scripts/ (Shell and JavaScript, from the files we listed), which the agent can run.

    Shell commands in SKILL.md call:

    • node

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

  • Network

    No URLs in SKILL.md.

    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 Design loads about 2.2k tokens when it runs. Until then it costs about 63 tokens; SKILL.md has 1,140 words of instructions outside code blocks.

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

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 passed

The automated check found no risky patterns in SKILL.md.

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); the scripts in this folder are not scanned.

SKILL.md

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

Download SKILL.mdSave it as .claude/skills/ijfw-design/SKILL.md (or your agent's skills folder). This skill also uses 30 other files; get the full folder from GitHub.
name
ijfw-design
description
Use when the user says: 'design', 'redesign', 'UI', 'UX', 'dashboard', 'page', 'component', 'make it look better', 'polish', 'pretty', 'professional', 'user experience', 'layout', 'visual', 'accessibility', 'colors', 'typography', 'brand'.

IJFW Design

Rule 0 - Real HTML mockups, never ASCII

When asked to show a design, mockup, layout, screen, or variant, produce REAL HTML and use the live design companion when a shell is available:

  1. Start the companion with ijfw design start (or ijfw design start --no-open in CI/headless sessions). It serves http://localhost:<port>/design.
  2. Write standalone HTML variants under .planning/<feature>/mockups/<variant>/index.html or .planning/brainstorm/<option>.html.
  3. Push the active variant with ijfw design push <file.html>. The open browser reloads automatically.
  4. When comparing options, create a tabbed viewer.html that loads option files from /design/files/<name>.html, then push the viewer and its option files together: ijfw design push .planning/brainstorm/*.html.

Use the active DESIGN.md or the picked template as the source of truth -- real colors, real type scale, real spacing, real content. Prefer DESIGN.md tokens first, then the chosen template/brand direction, then internal heuristics.

ASCII wireframes in chat are a LAST-RESORT FALLBACK, permitted only when:

  • The user explicitly asks for text-only ("just ASCII is fine").
  • No writable filesystem is available (extremely rare -- almost never in practice).

Do not default to ASCII boxes. Do not "sketch" in chat. The entire point of this skill is on-brand visual output; ASCII wastes the DESIGN.md contract, the palette, the type scale, and the user's time.

Structural diagrams (Mermaid architecture, data flow, component boundaries) are the exception -- those stay as text by convention.

Live Visual Loop

For UI/design brainstorming, offer the live companion before SHAPE: This is visual. Want me to open a live preview while we brainstorm?

If declined, continue with durable design notes in DESIGN.md or the current planning artifact and do not start a local server. If accepted, start the companion immediately and push a placeholder or first option so the user sees the loop working. For each design choice, update the HTML and run ijfw design push <file.html>; do not merely say where the file is. For multi-option viewers, push every supporting .html file so iframe tabs can resolve through /design/files/. If the companion cannot start, fall back to opening the HTML file directly and report the path.

The companion is for transient visual feedback: fast previews, option comparison, and live browser reloads. DESIGN.md is durable design memory: tokens, rationale, constraints, critiques, and handoff notes that should survive sessions, platforms, and project phases. Do not treat a pushed preview as the source of truth; persist decisions in DESIGN.md.

Durable Design Intelligence Commands

Use the durable ijfw design commands whenever the work needs a design contract, not just a preview. These commands are project-agnostic: they can apply to UI, content layout, brand systems, documents, diagrams, presentations, marketing surfaces, product packaging, or other non-code visual artifacts.

  • ijfw design init -- create or refresh DESIGN.md from detected project context, an existing template, or a chosen brand/style direction.
  • ijfw design plan -- turn the current goal into a visual plan with scope, surfaces, constraints, success criteria, and DESIGN.md updates to make.
  • ijfw design audit -- inspect the current design contract or artifact for consistency, accessibility, hierarchy, brand fit, and missing decisions.
  • ijfw design critique -- challenge the design direction, naming weak assumptions, visual risks, and alternatives before execution.
  • ijfw design polish -- propose refinements that improve visual quality while preserving the existing direction.
  • ijfw design normalize -- reduce drift by aligning colors, typography, spacing, tone, components, or layout patterns back to the contract.
  • ijfw design bolder -- explore a stronger or more distinctive version of the direction while keeping the project constraints visible.
  • ijfw design quieter -- explore a calmer, more restrained version for dense, operational, editorial, or high-trust contexts.
  • ijfw design handoff -- summarize the durable state: selected direction, open questions, accepted/rejected choices, artifact links, and next visual tasks.

Prefer this split:

  • Use ijfw design start/open/status/stop/push/clear for the live companion loop.
  • Use ijfw design init/plan/audit/critique/polish/normalize/bolder/quieter/handoff for durable design reasoning and DESIGN.md memory.

Step 1 - Check DESIGN.md

Check project root for DESIGN.md. If it exists:

  • Treat it as the design contract; pass it verbatim to the downstream specialist as source of truth.
  • Skip the picker entirely. Write the design-pass sentinel and proceed.
Show full SKILL.md (478 more words)Show less

Step 2 - No DESIGN.md: Three-Option Picker

MCP-only platforms (OpenCode, Qwen Code, Kimi Code, OpenClaw) access the same picker via ijfw_memory_recall({context_hint: 'design_template[:<name>]'}). Aider reads DESIGN.md once written.

Present exactly three options. Wait for user selection before proceeding. If the user's input doesn't match a valid template name or brand, re-prompt with the numbered list.

Option 1: Reference a brand ("like Vercel", "like Apple", "like Stripe")
  • Detect project domain from: package.json name/description/keywords, first paragraph of README.md, or project directory name.
  • Load data/brand-atlas.json (skill-relative) -- 12 domains x 3-5 brands.
  • Match keywords against domain entries; offer 3-5 brand suggestions from the best-fit domain.
  • If no domain match, offer a cross-domain sample (one brand per aesthetic tier).
  • User picks a brand -> compose a downstream prompt using that brand's aesthetic, palette_hint, and typography_hint fields.
  • Offer to write the composed design contract to project root as DESIGN.md so future sessions skip the picker.
Option 2: Pick a style (12 curated templates)

List the 12 templates from templates/design/ with a one-line description each (names are the filenames without .md: swiss-minimal, editorial-warm, terminal-native, cinematic-dark, glassmorphic, brutalist-luxe, maximalist-vibrant, neo-swiss-tech, data-dense-dashboard, warm-organic, bento-grid, magazine-editorial).

User picks -> read templates/design/<pick>.md -> use as design contract for this session. If the pick is unknown, show the numbered list again and ask for a valid name. Offer to write it to project root as DESIGN.md so future sessions skip the picker.

Option 3: Blank slate

Defer to the downstream specialist's native brainstorm flow. No preloaded template or brand.

Step 3 - Dispatcher

Priority order -- best available wins:

  1. ui-ux-pro-max -- check enabledPlugins in ~/.claude/settings.json for ui-ux-pro-max@
  2. frontend-design -- check enabledPlugins for frontend-design@claude-plugins-official
  3. superpowers design -- check enabledPlugins for superpowers@claude-plugins-official
  4. Internal fallback -- node scripts/search.js "<query>" --design-system (skill-relative)

Force internal: set IJFW_PREFER_INTERNAL=1. If no external skill found, emit: For richer design output, install ui-ux-pro-max. I'm using internal heuristics now.

Step 4 - IJFW Constraint Layer

Append these invariants to any downstream output IJFW itself generates (components, scripts, config):

  • Real HTML mockups, never ASCII -- see Rule 0 above; enforce on downstream specialists too
  • Zero deps in IJFW code -- dashboards, MCP server, installer use system font stacks and no CDN
  • User DESIGN.md may import custom fonts -- templates in templates/design/ include Google Fonts @import by design; that's the user's design contract, not IJFW infrastructure
  • Positive framing -- never "broken", always "ready to sharpen"
  • Platform segregation -- Claude/Codex/Gemini as first-class; no mixed-platform assumptions
  • ASCII-only source -- no unicode in IJFW code or config files (applies to source, not rendered mockup content)
  • 4.5:1 contrast minimum -- both light and dark themes (WCAG AA)

Design Pass Gate

When complete, write .ijfw/design-pass.json:

json
{"ts": "<ISO>", "query": "<goal>", "source": "<external|internal>", "skill": "<name>"}

Preflight gate design-pass checks for this sentinel on UI file changes.

Graduated Offer (Quick mode)

Before any UI code is written, emit: I'll run a design pass first. Say "show me" to open it, or "skip" to continue.

Wait for the user's next turn. One-word show me opens the design pass; skip continues without the visual companion.

© 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

SKILL.md and 30 other files (scripts) in codex/skills/ijfw-design of FerroxLabs/ijfw.

  • SKILL.md
  • README.md
  • data/brand-atlas.json
  • data/charts.csv
  • data/google-fonts.csv
  • data/palettes.csv
  • data/patterns.csv
  • data/reasoning.csv
  • data/styles.csv
  • data/typography.csv
  • data/ux-guidelines.csv
  • scripts/design-pass.sh
  • scripts/dispatch.sh
  • scripts/search.js
  • templates/design/bento-grid.md
  • templates/design/brutalist-luxe.md
  • templates/design/cinematic-dark.md
  • … and 14 more

Open the folder on GitHubat commit eda62f3

Compare with similar skills

Ijfw Design 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 Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ijfw Design this skillFerroxLabs/ijfw212—~2.2kAutomated safety check: PassMIT
Design Guidepaperclipai/paperclip99k1 repos~3.1kAutomated safety check: PassMIT
Design GuideLF-Decentralized-Trust-labs/gitmesh144—~3.1kAutomated safety check: PassApache-2.0
Distinctive Frontend Design Builderirahardianto/awesome-agv157—~2.4kAutomated safety check: PassMIT
UI UX Pro MaxInternScience/DrClaw172—~2.9kAutomated safety check: NotesNone
Frontend Blueprinttech-leads-club/agent-skills7k1 repos~5.3kAutomated safety check: PassCC-BY-4.0

Similar skills

  • Design Guide

    paperclipai/paperclip

    Paperclip UI design system guide for building consistent, reusable frontend components.

    99k GitHub starsUsed in 1 repo~3.1k tokens
    Frontend & DesignAuto-check passed

  • Design Guide

    LF-Decentralized-Trust-labs/gitmesh

    GitMesh Agents UI design system. An agent skill from LF-Decentralized-Trust-labs/gitmesh.

    144 GitHub stars~3.1k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Distinctive Frontend Design Builder

    irahardianto/awesome-agv

    Commits to one bold aesthetic direction, sets up a CSS token system for it, then builds the interface in Vue or plain HTML using those tokens.

    157 GitHub stars~2.4k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    InternScience/DrClaw

    [Frontend] Frontend UI/UX design intelligence - activate FIRST when user requests beautiful, stunning, gorgeous, or aesthetic interfaces.

    172 GitHub stars~2.9k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • Frontend Blueprint

    tech-leads-club/agent-skills

    AI frontend specialist and design consultant that guides users through a structured discovery process before generating any code.

    7k GitHub starsUsed in 1 repo~5.3k tokens
    Frontend & DesignAuto-check passed

  • Visual Design Foundations

    wshobson/agents

    Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs.

    40k GitHub starsUsed in 2 repos~1.8k 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 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

  • Ijfw Milestone Summary

    FerroxLabs/ijfw

    A skill your agent uses when the user asks for a milestone summary, milestone recap, or to summarize a milestone -- or runs /ijfw-milestone-summary.

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

Categories

Questions about Ijfw Design

What does Ijfw Design do?

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'…. Ijfw Design is an agent skill from FerroxLabs/ijfw. Use when the user says: 'design', 'redesign', 'UI', 'UX', 'dashboard', 'page', 'component', 'make it look better', 'polish', 'pretty', 'professional', 'user experience', 'layout', 'visual', 'accessibility', 'colors', 'typography', 'brand'.

When should I use Ijfw Design?

Ijfw Design fits situations like: the user says: design; make it look better; user experience.

How do I install Ijfw Design in Claude Code?

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

How do I install Ijfw Design in Codex?

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

Can I use Ijfw Design 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-design -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-design, .gemini/skills/ijfw-design, .github/skills/ijfw-design and .opencode/skills/ijfw-design in your project.

What does Ijfw Design need to run?

Going by SKILL.md and its folder, Ijfw Design needs a shell and JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js; A Bash shell.

Does Ijfw Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Ijfw Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Ijfw Design use?

Ijfw Design 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 Design use?

About 2.2k tokens (SKILL.md is roughly 8.9k 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 Design?

Skills that share tags, products or a category with Ijfw Design: Design Guide (paperclipai/paperclip, 99k stars), Design Guide (LF-Decentralized-Trust-labs/gitmesh, 144 stars), Distinctive Frontend Design Builder (irahardianto/awesome-agv, 157 stars) and UI UX Pro Max (InternScience/DrClaw, 172 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ijfw Design?

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.