More screenshots

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseOpenClawOpenClaw+21 more

    afos interface architect

    1

    Deterministic design engine for AI agents that enforces WCAG compliance and eliminates generic AI slop.

    $39.99

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    Security scanned
    afos interface architect

    afos interface architect

    Example session with this skill installed

    Validate this Hero section component for slop and check contrast for #00F29D text on a #090A0F background. Ensure it doesn't look like a generic AI template.

    • Read your context and instructions
    • Compiled the afos interface architect
    • Generated the design tokens stylesheet

    I have analyzed the Hero section component and performed the mathematical contrast audit. The component passes the anti-slop linter, avoiding generic purple gradients and standard three-card boilerplate.

    Interface Audit Results

    MetricValueStatus
    ThememonolithValidated
    Contrast Ratio12.8:1Pass (WCAG AAA)
    APCA ScoreLc 94.2Pass (High Contrast)
    Touch Targets48pxPass (>44px)
    Component Size142 LOCPass (<350 LOC)
    Slop CheckNo generic gradients or "Next-Gen" copyPass

    Design Tokens (Monolith Theme)

    :root {
  --afos-surface-60: #090a0f;
  --afos-surface-30: #161b22;
  --afos-accent-10: #00f29d;
  --afos-text-primary: #f0f4f8;
  --afos-font-stack: "JetBrains Mono", monospace;
}

    Next steps

    1. Apply the --afos-surface-60 variable to the main container to maintain theme integrity.
    2. Ensure the JetBrains Mono font is loaded in your global CSS.
    3. Run npx afos-interface-architect live-check to verify the final assembly.

    afos-interface-architect-tokens.css

    CSS · design tokens

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Enforce WCAG 2.1 AA/AAA contrast compliance automatically.Block generic purple/pink AI gradients and boilerplate layouts.Compile curated design tokens for 10 distinct professional themes.Lint generated JSX/TSX for touch target size and component length.

    About this skill

    The problem

    AI-generated frontends suffer from "slop": generic purple gradients, repetitive three-card layouts, and uninspired system fonts. Most AI agents ignore accessibility standards, producing UI with illegal contrast ratios and undersized touch targets.

    What it does

    • Enforces deterministic design governance using the 60/30/10 surface elevation rule across 10 curated themes.
    • Automatically lints components to block generic AI design tropes, purple/pink gradients, and marketing clichés.
    • Calculates exact WCAG 2.1 AA/AAA and APCA perceptual contrast ratios for all foreground/background pairs.
    • Enforces strict component size ceilings (max 350 LOC) and minimum 44px touch targets.
    • Provides pre-design ingress hooks to prevent path traversal and validate tenant isolation.

    Frameworks & tools

    Node.js, TypeScript, OKLCH, CSS Custom Properties, and WCAG 2.1/APCA specifications.

    Why this beats prompting it yourself

    Prompting an LLM to "be accessible" or "avoid clichés" is hit-or-miss. This skill provides a programmatic enforcement layer with mathematical contrast verification and AST-based linting that catches slop before it hits your codebase.

    Use cases

    • Enforcing a high-density "Bloomberg" financial aesthetic across a dashboard.
    • Automating accessibility audits during the CI/CD pipeline for generated React components.
    • Preventing "AI-looking" landing pages by blocking common boilerplate patterns.
    • Standardizing design tokens across multi-tenant applications using validated CSS variables.

    Known limitations

    Components exceeding 350 lines of code will be rejected by the anti-slop linter. Requires Node.js environment for CLI execution.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 15 days ago

    • Passed all security checks, Safe to install

    Needs access to

    Shields

    Listed15 days ago

    What's inside

    Frequently Asked Questions