UI Design & Frontend Skills

Skill pack

jskim-90Skills in this pack

Audits the Claude Code configuration of a project against the dotforge template. Generates a report with score and gaps.

English

Figma to HTML

Figma 디자인을 정적 HTML/CSS로 변환합니다. Figma 링크나 node-id가 제공되면 MCP를 통해 디자인 정보를 가져와 정확한 코드를 생성합니다. Use when converting Figma designs to HTML/CSS, or when user mentions Figma links, design conversion, or static HTML implementation.

English

Create 3D Component

개별 단위 3D 컴포넌트를 생성합니다. 단일 GLTF 모델(1 장비 = 1 Mesh)의 컴포넌트를 CLAUDE.md 명세에 따라 구현합니다.

Korean

Create Project

RNBT 아키텍처 패턴에 맞는 완전한 대시보드 페이지를 생성합니다. Master/Page 레이어, 여러 컴포넌트, Mock 서버, datasetList.json을 포함합니다.

Korean

Figma to Inline Svg

Figma 디자인을 인라인 SVG가 포함된 정적 HTML/CSS로 변환합니다. 런타임에서 색상 제어가 필요한 심볼/아이콘용입니다. Use when converting Figma SVG designs to inline SVG HTML for runtime color control, symbol state components, or icon theming.

Uncertain

AGENT SKILLS ATLAS

UI Design & Frontend Skills

Includes Audit Project, Figma to HTML, and other workflows.

Install with

Claude Code

Codex

Cursor

GitHub Copilot

Gemini CLI

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

Pack stats

Skills5CategorygeneralStars0

Quick start

Choose your skills. Select individual skills above, or choose the entire pack.
Copy the install prompt. Use Copy install prompt above the list.
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 Audit Project 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.

Installation guide →Skill review & security →