agentleFS
Sign inStart free
hamzzaqureshihamzzaqureshi/gravidex/.claude/skills/interface-design/SKILL.md

interface-design

Skill1 starsChanged 7 days agoMITView on GitHub

Design and critique production user interfaces across web, mobile, and desktop. Combines UI/UX guidelines across 22 frameworks, Apple Human Interface Guidelines (HIG), 9-pass anti-slop redline craft transformation, Swiss grid typography, and motion calibration. Use when designing user interfaces, auditing UI aesthetics, improving UX flows, or polishing AI-generated interfaces.

23 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use vercel-react-best-practices, web-design-guidelines and 2 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • VercelSkill

    vercel-react-best-practices

    React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

    Also in 4 projects that use this

  • VercelSkill

    web-design-guidelines

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

    Also in 3 projects that use this

  • BlockSkill

    frontend-design

    Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

    Also in 4 projects that use this

  • SentrySkill

    skill-creator

    Create new agent skills following the Agent Skills specification. Use when asked to "create a skill", "add a new skill", "write a skill", "make a skill", "build a skill", or scaffold a new skill with SKILL.md. Guides through requirements, writing, registration, and verification.

    Also in 3 projects that use this

The file

Create a free account to mount
Files
SKILL.md

Interface Design

Consolidated capability for designing, reviewing, and transforming digital user interfaces across web, iOS/macOS, mobile, and desktop applications.

When to Activate

  • Designing UI components, layouts, screens, user flows, and forms.
  • Reviewing interfaces for Apple Human Interface Guidelines (HIG) compliance and accessibility.
  • Unslopping AI-generated interfaces to eliminate purple glows, generic cards, and vibecoded cliches.
  • Enforcing Swiss grid typography, editorial density, and high-contrast typographic scales.
  • Calibrating interactive motion dials (GSAP ScrollTrigger timelines, restrained transitions <300ms).

When NOT to Activate

  • Implementing production frontend React/Next.js code (use frontend-engineering).
  • Authoring design tokens, color palette palettes, or raw SVG vectors (use design-systems).
  • Writing backend services or REST API routes (use backend-engineering).

Core Execution Workflow

  1. Design Hierarchy & Direction:
    • Establish one bright focal element per view; keep chrome quiet and subordinate.
    • Enforce Swiss typographic discipline: geometric fonts, clear scale ratios, WCAG AAA contrast.
    • Consult references/ui-ux-guidelines.md.
  2. The 9-Pass Redline Craft Transformation (Unslopping):
    • Apply the 9-pass audit: Purpose, Spacing, Color hierarchy, Iconography, Copywriting, Typography, Layout composition, Visual craft, and Motion restraint.
    • Consult references/anti-slop-redline-craft.md.
  3. Platform Standards & HIG Review:
    • Ground iOS, iPadOS, macOS, and cross-platform designs in Apple HIG component specifications.
    • Consult references/apple-human-interface-guidelines.md.
  4. Motion & Aesthetic Calibration:
    • Tune the three creative dials: VARIANCE, MOTION, and DENSITY.
    • Restrain interface animations to <300ms standard easing. Ban generic floating cards and ambient glows.
    • Consult references/taste-motion-calibration.md and references/anti-vcode-scorecard.md.

Modular Reference Directory

Reference ModulePrimary FocusSource Provenance
ui-ux-guidelines.md79 styles, 192 product palettes, 74 font pairings, 119 UX guidelineshamzzaqureshi/gravidex (ui-ux-max)
apple-human-interface-guidelines.mdApple HIG rules, mobile/desktop components, Liquid Glass, App Review gatesdickwu/apple-design-skill (apple-design)
anti-slop-redline-craft.md9-pass redline craft pass, purposeful visual hierarchy, eliminating AI clichesheydamir/unslop (unslop)
taste-motion-calibration.mdCreative dials, GSAP timeline choreography, 12-point preflight checklisthamzzaqureshi/gravidex (taste)
anti-vcode-scorecard.md40-pattern anti-slop code scanner and diagnostic scorecardhamzzaqureshi/gravidex (anti-vcode)

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free