More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIDeepSeekDeepSeekMuseMuse+22 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

    Money-back 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

    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.

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

    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.

    Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Humanizer Skills.

    Strict 350 LOC limit per component. Requires Node.js environment for CLI tools. Does not support legacy IE11 CSS syntax.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before buying a skill.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scan

    Security scan passed 2 months ago

    Software
    afos-interface-architectNode.js

    Permissions

    Terminal / Shell
    Network Access
    Listed2 months ago

    What's inside

    Frequently Asked Questions

    The afos interface architect acts as a programmatic governance layer that lints AI-generated code to block generic 'slop' (like overused gradients and layouts) while mathematically enforcing WCAG 2.1 AA/AAA and APCA contrast standards.

    This skill is designed for Node.js and TypeScript environments, generating standard CSS Custom Properties and OKLCH color values that are compatible with any modern frontend framework like React, Vue, or Svelte.

    The architect enforces a strict component ceiling of 350 lines of code; any generated components exceeding this limit will be flagged and rejected by the anti-slop linter to ensure maintainability and modularity.

    Yes, the skill includes pre-design ingress hooks specifically engineered to validate tenant isolation and prevent path traversal, ensuring that generated UI tokens remain secure in multi-tenant applications.

    You will receive the core design engine, the deterministic linting ruleset, 10 curated professional themes, and access to all future version updates for this specific skill.

    New in UX & UI Design