Skillforge arrive bientôt sur mobile.

Ouvre le site sur un ordinateur ou une tablette pour parcourir les mods.

Mod · SKF/MOD.06-DS

Design Studio

Des interfaces qui ont du caractère, un système de design propre et un audit avant livraison.

  • 7 skills : Design et interface
  • Claude, Gemini et Codex
  • Licences d'origine incluses

7 skills inclus

  • Frontend Design

    Fait donner à l'agent une identité visuelle propre à chaque interface : plan de tokens revu contre le brief avant le code, puis critique et coupe.

    sf-frontend-design/SKILL.md, de anthropics/skills, licence Apache 2.0.

    ---
    name: sf-frontend-design
    description: Gives a new or reworked web UI a distinctive, intentional visual identity grounded in its subjec…
    ---
    # Frontend Design
    Work as the design lead of a studio known for giving every client an identity nobody confuses with anyone els…
    ## When to use
    - New pages or screens where the visual direction is open.
    - Redesigns of a UI that reads as generic.
    Not for: fixing spacing and polish on an existing design system (use `sf-ui-polish`), component architecture…

  • Design Taste

    Fait diriger l'artistique d'une page par l'agent : direction issue de 247 sites étudiés, idée tirée du sujet, règles mesurées au navigateur.

    sf-design-taste/SKILL.md, de leonxlnx/taste-skill, licence MIT.

    ---
    name: sf-design-taste
    description: "Art-directs public web pages and app screens from a library distilled from 247 curated gallery…
    ---
    # Design Taste
    A page built by a model usually looks like the average of every page it has seen: a centred headline over thr…
    1. **A script deals directions, you choose.** `scripts/draw.mjs` deals three of twenty researched directions;…
    2. **The idea comes from the subject.** In the study, a concept taken from the thing itself separated the bes…
    3. **A house style with no ornaments,** measured by `scripts/inspect.mjs` in a real browser.
    4. **You look at what you made:** screenshots at three widths, a juror's rubric, fix, look again.
    Removing ornaments is only half the job. A page that lost its labels, rules and cards and gained nothing read…

  • UI Polish

    Fait concevoir, critiquer et peaufiner une interface par l'agent via 24 commandes ciblées (audit, polish, bolder, harden…), adaptées au mode de la page.

    sf-ui-polish/SKILL.md, de pbakaus/impeccable, licence Apache 2.0.

    ---
    name: sf-ui-polish
    description: "Designs, critiques, audits and refines frontend interfaces through 24 focused commands (shape,…
    user-invocable: true
    argument-hint: "[shape | audit | critique | animate | bolder | colorize | delight | layout | overdrive | quie…
    ---
    # UI Polish
    Work as an award-winning design director would: production-grade code, a clear point of view, a deep grasp of…
    - **Finish the job.** No hedging, no shortcuts. The deliverable is complete except for assets only the user c…
    - **Scale ambition to the surface's mode.** Persuade and Experience get bold, distinct work. On Operate and R…
    - **Verify by looking** at the rendered result at the sizes it ships at. Batch the checks: fix everything one…
    ## When to use

  • Design Engineering

    Fait soigner à l'agent les détails qui rendent une UI agréable : quand animer, courbes, durées, retours au clic, popovers, gestes, perf et revue avant/après.

    sf-design-engineering/SKILL.md, de emilkowalski/skills, licence MIT.

    ---
    name: sf-design-engineering
    description: "Applies design-engineering craft to UI code so interfaces feel right: when to animate and when…
    ---
    # Design Engineering
    Build interfaces where every small detail is correct, so the whole feels right without anyone knowing why. Mo…
    ## When to use
    - Writing or reviewing interactive components and their motion.
    - Diagnosing why a UI feels sluggish, jumpy or cheap.
    For a full animation audit, use `sf-animation-review`; for animation vocabulary, `sf-motion-vocabulary`; for…

  • Frontend UI Engineering

    Fait construire à l'agent des interfaces prêtes pour la prod : composants ciblés, état bien placé, tokens, accessibilité WCAG AA et tous les états d'écran.

    sf-ui-engineering/SKILL.md, de addyosmani/agent-skills, licence MIT.

    ---
    name: sf-ui-engineering
    description: Builds production-quality, accessible, responsive user interfaces in React and similar framework…
    ---
    # Frontend UI Engineering
    Ship UI that a design-aware engineer at a strong product company would ship: it follows the design system, wo…
    ## When to use
    - New components or pages, changes to existing interfaces, responsive layouts, interactivity and state.
    - Fixing visual or UX issues in an existing codebase.
    For visual direction on an open brief, start with `sf-frontend-design`. For Tailwind tokens and variants, use…

  • Tailwind Design System (v4)

    Fait bâtir à l'agent un design system Tailwind v4 : tokens @theme en OKLCH, mode sombre par variables, variantes CVA et migration depuis v3.

    sf-tailwind-system/SKILL.md, de wshobson/agents, licence MIT.

    ---
    name: sf-tailwind-system
    description: Builds and maintains design systems on Tailwind CSS v4 with CSS-first configuration (@theme, @cu…
    ---
    # Tailwind Design System (v4)
    Turn a Tailwind codebase into a consistent system: tokens defined once in CSS, semantic utilities everywhere,…
    ## When to use
    - Defining or changing theme tokens, colors, radii, fonts, animations.
    - Building reusable components with variants and sizes.
    - Dark mode and theming.
    - Migrating a v3 project to v4.

  • Web Artifacts

    Fait construire à l'agent un artefact React + shadcn/ui en plusieurs composants puis le regrouper en un seul fichier HTML autonome.

    sf-web-artifacts/SKILL.md, de anthropics/skills, licence Apache 2.0.

    ---
    name: sf-web-artifacts
    description: Builds elaborate, multi-component web artifacts with React, TypeScript, Tailwind CSS and shadcn/…
    ---
    # Web Artifacts
    Scaffold a React project with shadcn/ui, build the artifact in it, and inline everything into a single `bundl…
    ## When to use
    - The artifact has several components, client state, tabs or routes, forms, or uses shadcn/ui.
    Not for a single page that fits in one HTML file with inline script: write that directly. For visual directio…
    ## Stack

Extraits. Les dossiers complets sont livrés après le paiement.

Installation

Dézippe le dossier, ouvre un terminal dedans et lance bash install.sh : le script installe les skills pour Claude, Gemini et Codex, dans tous tes projets. Relance-le après une mise à jour, il remplace les anciennes versions sans rien dupliquer. Sur Windows, utilise Git Bash ou WSL.

Depuis Claude Code, sans ouvrir de terminal : lance Claude Code dans le dossier dézippé et demande-lui « installe ces skills ». Il exécute bash install.sh après ton accord. Les skills sont utilisables dans la session en cours ; si l'un n'apparaît pas, ouvre une nouvelle session. Un mod par dossier : refais la demande dans chaque dossier.

  • ClaudeSKILL.md

    bash install.sh claude copie chaque skill dans ~/.claude/skills/. Ajoute le dossier d'un projet à la fin de la commande pour l'installer dans ce projet seulement.

  • GeminiGEMINI.md

    bash install.sh gemini ajoute les skills à ~/.gemini/GEMINI.md, ou au GEMINI.md d'un projet si tu donnes son dossier.

  • CodexAGENTS.md

    bash install.sh codex ajoute les skills à ~/.codex/AGENTS.md, ou à l'AGENTS.md d'un projet si tu donnes son dossier.

  • Claude.aiclaude-ai/*.zip

    Dans Claude sur le web, l'app de bureau ou mobile, active d'abord l'exécution de code (Settings > Capabilities, « Code execution and file creation »). Puis Customize > Skills, bouton +, « Create skill », « Upload a skill », et choisis un fichier du dossier claude-ai/ de l'archive. Un zip contient un skill : importe-les un par un. Tous les plans y ont accès ; sur Team et Enterprise, l'exécution de code s'active dans les réglages de l'organisation.

  • Autres agentsAGENTS.md

    Cursor, GitHub Copilot et les autres agents qui lisent AGENTS.md : bash install.sh codex ~/mon-projet ajoute les skills à l’AGENTS.md de ton projet.

Autres mods