← All skill packs

Claude Code: UI Design & Frontend Skills

Skill pack
11 skills0 selected
elsolalSkills in this pack

Generates custom design system rules for the user's codebase.

English

Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling usefigma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g.

English

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma.

English

Build or update a professional-grade design system in Figma from a codebase.

English

Elite website image-to-code skill for Codex.

English

Conçoit des APIs REST/GraphQL avec OpenAPI spec, versioning, et documentation.

French

Lit et analyse une issue GitHub pour extraire les requirements, critères d'acceptance et contexte. Utiliser quand on démarre une feature, quand on mentionne une issue GitHub, ou quand on a besoin de comprendre les specs d'une tâche.

French

Facilite des sessions de brainstorming créatif pour explorer et développer des idées. Utiliser quand l'utilisateur a une idée vague, veut explorer des possibilités, dit "j'ai une idée", "brainstorm", "réfléchissons", ou veut générer des concepts avant de structurer un projet.

French

Débat multi-agents avec 6 IA pour valider PRD et code.

French

Audit de performance du code et de l'application. Analyse Lighthouse, bundle size, Core Web Vitals, et optimisations. Utiliser après l'implémentation, avant une release, ou quand l'utilisateur dit "performance", "slow", "optimize", "bundle size".

French

Audit de sécurité complet pour les projets Supabase. Lance un pentest automatisé qui vérifie RLS, buckets, auth, keys exposées, et génère un rapport avec remediation. Utiliser quand l'utilisateur dit "audit supabase", "sécurité supabase", "vérifier mon supabase", ou veut s'assurer que son backend Supabase est sécurisé.

French

Includes Figma Create Design System Rules, Figma Create New File, Figma Generate Design, and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills11CategorygeneralStars0

What’s included

Figma Create Design System Rules

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "cu

Figma Create New File

Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling usefigma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)

Figma Generate Design

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create i

Figma Generate Library

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming

Image Taste Frontend

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the

API Designer

Conçoit des APIs REST/GraphQL avec OpenAPI spec, versioning, et documentation. Utiliser pour les projets API-first, quand on définit des endpoints, ou quand l'utilisateur

GitHub Issue Reader

Lit et analyse une issue GitHub pour extraire les requirements, critères d'acceptance et contexte. Utiliser quand on démarre une feature, quand on mentionne une issue GitHub, ou quand on a besoin de comprendre les specs d'une tâche.

Idea Brainstorm

Facilite des sessions de brainstorming créatif pour explorer et développer des idées. Utiliser quand l'utilisateur a une idée vague, veut explorer des possibilités, dit "j'ai une idée", "brainstorm", "réfléchissons", ou veut générer des concepts avant de structurer un projet.

Multi Mind

Débat multi-agents avec 6 IA pour valider PRD et code. Utiliser pour obtenir des perspectives diverses sur des décisions critiques, après un PRD en mode FULL, ou après un

Performance Auditor

Audit de performance du code et de l'application. Analyse Lighthouse, bundle size, Core Web Vitals, et optimisations. Utiliser après l'implémentation, avant une release, ou quand l'utilisateur dit "performance", "slow", "optimize", "bundle size".

Supabase Security

Audit de sécurité complet pour les projets Supabase. Lance un pentest automatisé qui vérifie RLS, buckets, auth, keys exposées, et génère un rapport avec remediation. Utiliser quand l'utilisateur dit "audit supabase", "sécurité supabase", "vérifier mon supabase", ou veut s'assurer que son backend Supabase est sécurisé.

Quick start

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

Try it with your agent

After installation, start with a request like:

Example request
Use the Figma Create Design System Rules skill to help with my task.
Ask me for the context you need before getting started.

Requirements & license

  • A coding agent that can access your project files and install skills.
  • Your agent checks each skill’s instructions, dependencies, and permissions during setup.
  • License details are not provided in these listings. Check the author’s terms before using the skills.
Claude Code: UI Design & Frontend Skills | Agent Skills Atlas