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

Formax Web Style System

by yusifeng in yusifeng/formax

A skill your agent uses for all frontend and web UI tasks by default to apply a business-agnostic desktop web visual style system with medium-strength guardrails; if an existing design system is…

MITAuto-check passedFrontend & Design

Install Formax Web Style System

skills CLI
$ npx skills add yusifeng/formax --skill formax-web-style-system -a claude-code

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

GitHub CLI
$ gh skill install yusifeng/formax formax-web-style-system --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/yusifeng/formax.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/formax-web-style-system .claude/skills/formax-web-style-system && 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
formax-web-style-system
GitHub stars
194
Token cost
~902 tokens
SKILL.md length
406 words
Files
6 (incl. references)
Skills in repo
21
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses for all frontend and web UI tasks by default to apply a business-agnostic desktop web visual style system with medium-strength guardrails; if an existing design system is…

  • Works in 6 steps: Read references/style-doctrine.md first… → Read references/token-blueprint.md to… → Read references/layout-patterns.md when… → …
  • All frontend and web UI tasks by default to apply a business-agnostic desktop web visual style system with medium-strength guardrails
  • SKILL.md covers Goal, Trigger Contract, Workflow and Formax Overrides (Mandatory…, plus 2 more sections
  • Calls bun

What it does

Formax Web Style System is an agent skill from yusifeng/formax. Use for all frontend and web UI tasks by default to apply a business-agnostic desktop web visual style system with medium-strength guardrails; if an existing design system is present, follow it first and use this skill only as a style harmonizer.

Its SKILL.md is about 900 tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `references/anti-patterns.md`, `references/component-tone.md` and `references/layout-patterns.md`).

It sits in Frontend & Design, covering Frontend development, Design systems and LLM guardrails. The repository describes itself as: Terminal-first AI assistant for software engineering tasks (inspired by Claude Code v2.0.67). The licence is MIT.

When your agent uses it

  • All frontend and web UI tasks by default to apply a business-agnostic desktop web visual style system with medium-strength guardrails
  • An existing design system is present
  • Follow it first and use this skill only as a style harmonizer

Example prompts

  • “/formax-web-style-system”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Read references/style-doctrine.md first to lock the visual direction.
  2. Read references/token-blueprint.md to define CSS variable layers before proposing UI details.
  3. Read references/layout-patterns.md when composing desktop layout, density, and responsive fallback.
  4. Read references/component-tone.md when styling components, states, and interaction emphasis.
  5. Read references/anti-patterns.md as a final rejection checklist before returning output.
  6. Apply all CRITICAL STYLE OVERRIDES from the references as mandatory constraints.

What it can do on your machine

Read from SKILL.md and the folder at commit 1b0c3f3. 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

    Shell commands in SKILL.md call:

    • bun

    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

Formax Web Style System loads about 902 tokens when it runs, and up to ~3.6k if it reads all its reference files. Until then it costs about 68 tokens; SKILL.md has 406 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~902
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.6k

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from yusifeng/formax at commit 1b0c3f3, republished under its MIT licence (© yusifeng). 406 words, ~902 tokens.

Download SKILL.mdSave it as .claude/skills/formax-web-style-system/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
formax-web-style-system
description
Use for all frontend and web UI tasks by default to apply a business-agnostic desktop web visual style system with medium-strength guardrails; if an existing design system is present, follow it first and use this skill only as a style harmonizer.

Formax Web Style System

Goal

Apply a business-agnostic visual style system for web interfaces.

Enforce a calm, desktop-grade aesthetic with strong readability, token-first styling, and clear interaction hierarchy.

Do not introduce product workflow assumptions, domain copy assumptions, or business IA decisions.

Trigger Contract

Use this skill by default for all frontend and web UI tasks.

If the task is not frontend/UI work, do not apply this skill.

If the repository or task provides an existing design system, brand guide, or component library:

  • Follow the existing system first.
  • Use this skill only to harmonize tone, spacing rhythm, and state clarity.
  • Never override explicit local design constraints.

Workflow

  1. Read references/style-doctrine.md first to lock the visual direction.
  2. Read references/token-blueprint.md to define CSS variable layers before proposing UI details.
  3. Read references/layout-patterns.md when composing desktop layout, density, and responsive fallback.
  4. Read references/component-tone.md when styling components, states, and interaction emphasis.
  5. Read references/anti-patterns.md as a final rejection checklist before returning output.
  6. Apply all CRITICAL STYLE OVERRIDES from the references as mandatory constraints.

For small styling requests, keep output concise but still include token strategy and state clarity.

Formax Overrides (Mandatory for CSS Rework)

When the task touches CSS in packages/web-reference-react/**, do this before editing:

  1. Read .codex/skills/formax-web-css-convergence-workflow/SKILL.md.
  2. Lock a pre-edit intake contract (target model, non-goals, ownership boundary, acceptance checks).
  3. Use single-axis passes (geometry -> color -> interaction), avoid mixed multi-axis edits.
  4. Validate with:
    • bun run test -- src/App.test.tsx (in packages/web-reference-react)
  5. If and only if the task includes transparency/window layering:
    • Read docs/contracts/web/window-transparency-construct.md
    • Run bun run test:e2e -- e2e/window-transparency.evidence.spec.js --project=chromium (in packages/web-reference-react)
Show full SKILL.md (147 more words)Show less

Output Contract

For each frontend/web UI response, always include these sections (explicit headings):

  1. visual_direction
  2. tokens
  3. layout
  4. component_tone
  5. responsive_notes

Inside tokens, provide CSS variable categories at minimum for:

  • color
  • typography
  • spacing
  • radius
  • shadow
  • motion

Prefer style system guidance and representative snippets over large hard-coded CSS dumps.

Guardrails

Never do the following:

  • Assume product business flows, user journeys, or domain-specific copy.
  • Default to purple-first palettes when not requested.
  • Default to dark-mode-first styling when not requested.
  • Produce generic template-like SaaS visuals without distinct visual intent.
  • Hard-code ad-hoc colors and spacing without a token layer.
  • Copy screenshot pixels exactly; preserve mood, not exact geometry.
  • Replace required glass-material sidebars with opaque flat fills.
  • Use bordered inputs in default state when soft-filled inputs are specified.

Always keep medium constraint strength:

  • Strong enough to maintain consistent visual quality.
  • Flexible enough to adapt to different frontend tasks and local systems.

© yusifeng, 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 5 other files (references) in .codex/skills/formax-web-style-system of yusifeng/formax.

  • SKILL.md
  • references/anti-patterns.md
  • references/component-tone.md
  • references/layout-patterns.md
  • references/style-doctrine.md
  • references/token-blueprint.md

Open the folder on GitHubat commit 1b0c3f3

Compare with similar skills

Formax Web Style System 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.

Formax Web Style System compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Formax Web Style System this skillyusifeng/formax194—~902Automated safety check: PassMIT
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0
Avoid AI Designsunkaifei/FlyCms656—~3.5kAutomated safety check: PassMIT
Superdesignsuperdesigndev/superdesign-skill642—~4.1kAutomated safety check: PassMIT
UI Design Braincarmahhawwari/ui-design-brain893—~2.1kAutomated safety check: PassMIT
Frontend Design Routercode-yeongyu/oh-my-openagent70k—~5.3kAutomated safety check: PassCustom licence

Similar skills

  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

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

  • Avoid AI Design

    sunkaifei/FlyCms

    Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"), both the first-order defaults (purple gradients, Inter, a centered hero over three cards, untouched shadcn) and the…

    656 GitHub stars~3.5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Superdesign

    superdesigndev/superdesign-skill

    Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models.

    642 GitHub stars~4.1k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • UI Design Brain

    carmahhawwari/ui-design-brain

    Generate production-grade UI using real component patterns and best practices from 60+ documented interface components.

    893 GitHub stars~2.1k tokensUpdated 7 mo ago
    Frontend & DesignAuto-check passed

  • Frontend Design Router

    code-yeongyu/oh-my-openagent

    Routes frontend and UI work through design reference rulesets, with a design-system gate plus layout and print guidance, before any UI code is written.

    70k GitHub stars~5.3k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Project-Native Component Builder

    kostja94/bricks

    Builds new interface components inside an existing project, reusing its design system, stack and conventions instead of producing isolated demo UI.

    199 GitHub stars~965 tokensUpdated 15 days ago
    Frontend & DesignAuto-check passed

More from yusifeng/formax

All 21 skills in this repo

  • Formax Repomix Handoff Workflow

    yusifeng/formax

    A skill your agent uses when preparing a Formax code handoff: selecting files, generating repomix bundles, and writing a high-quality prompt for WebGPT or another coding agent with clear constraints…

    194 GitHub stars~1.2k tokensUpdated 2 mo ago
    Auto-check passed

  • Formax Skill Capture

    yusifeng/formax

    A skill your agent uses when we want to turn a just-finished Formax workflow (e.g.

    194 GitHub stars~530 tokensUpdated 2 mo ago
    Auto-check passed

  • Analyze Task

    yusifeng/formax

    A skill your agent uses when a Formax repository task is non-trivial and you should analyze goals, non-goals, boundaries, data/type/interface impact, contract impact, test strategy, and whether an…

    194 GitHub stars~1.2k tokensUpdated 2 mo ago
    Auto-check passed

  • Formax Dev Loop Workflow

    yusifeng/formax

    A skill your agent uses when working on Formax code changes and you need a disciplined dev loop: keep a single mainline task, avoid scope drift, run only targeted tests (no coverage), avoid partial…

    194 GitHub stars~686 tokensUpdated 2 mo ago
    Auto-check passed

  • Formax Tool UI Blocks Workflow

    yusifeng/formax

    Implement or refactor Formax tool transcript UI using the Tool UI Blocks (C-lite) pattern (ToolUiBlocks renderer + blocks presenters) to avoid touching many tool presenter files; use when adjusting…

    194 GitHub stars~1.3k tokensUpdated 2 mo ago
    Auto-check passed

  • Formax Semantics Parity Workflow

    yusifeng/formax

    A skill your agent uses when implementing or modifying behavior that must stay consistent across TUI and Web (mode/input/tool/replay/order).

    194 GitHub stars~1.1k tokensUpdated 2 mo ago
    Auto-check passed

Categories

Questions about Formax Web Style System

What does Formax Web Style System do?

A skill your agent uses for all frontend and web UI tasks by default to apply a business-agnostic desktop web visual style system with medium-strength guardrails; if an existing design system is…. Formax Web Style System is an agent skill from yusifeng/formax. Use for all frontend and web UI tasks by default to apply a business-agnostic desktop web visual style system with medium-strength guardrails; if an existing design system is present, follow it first and use this skill only as a style harmonizer.

When should I use Formax Web Style System?

Formax Web Style System fits situations like: all frontend and web UI tasks by default to apply a business-agnostic desktop web visual style system with medium-strength guardrails; an existing design system is present; follow it first and use this skill only as a style harmonizer.

How do I install Formax Web Style System in Claude Code?

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

How do I install Formax Web Style System in Codex?

Run `npx skills add yusifeng/formax --skill formax-web-style-system -a codex`. Or copy the skill folder (.codex/skills/formax-web-style-system in yusifeng/formax) into .agents/skills/formax-web-style-system in your project. Codex loads it when a task matches its description.

Can I use Formax Web Style System 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 yusifeng/formax --skill formax-web-style-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/formax-web-style-system, .gemini/skills/formax-web-style-system, .github/skills/formax-web-style-system and .opencode/skills/formax-web-style-system in your project.

What does Formax Web Style System need to run?

Going by SKILL.md and its folder, Formax Web Style System needs the command-line tools its instructions call (bun).

Does Formax Web Style System 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 Formax Web Style System 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. Review the folder before installing.

What licence does Formax Web Style System use?

Formax Web Style System 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 Formax Web Style System use?

About 902 tokens (SKILL.md is roughly 3.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.7k tokens, read only when the agent opens those files.

What are the alternatives to Formax Web Style System?

Skills that share tags, products or a category with Formax Web Style System: Design Style (Castor6/tactus, 376 stars), Avoid AI Design (sunkaifei/FlyCms, 656 stars), Superdesign (superdesigndev/superdesign-skill, 642 stars) and UI Design Brain (carmahhawwari/ui-design-brain, 893 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Formax Web Style System?

yusifeng (a GitHub user) maintains it in yusifeng/formax, which has 194 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on July 24, 2026.

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