frontend-design
Specifies design and validation standards for user onboarding and AI configuration forms.
Install
mkdir -p .claude/skills/frontend-design-0lin0-c && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14470" && unzip -o skill.zip -d .claude/skills/frontend-design-0lin0-c && rm skill.zipInstalls to .claude/skills/frontend-design-0lin0-c
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
前端界面与表单设计规范。定义用户画像初始化流程、AI 助手定制表单及数据校验逻辑。Key capabilities
- →Define new user registration flow with step-by-step guidance
- →Specify AI assistant customization forms
- →Implement data validation logic for frontend forms
- →Ensure field naming consistency with backend API schemas
- →Manage dynamic display of identity details based on user type
- →Configure LLM settings for users
How it works
This skill outlines the mandatory frontend design specifications for user onboarding and AI assistant customization, including form structures and data validation.
Inputs & outputs
When to use frontend-design
- →Onboarding flow design
- →AI assistant setup
- →Define form validation
About frontend-design
Defines mandatory flows for new user registration and AI assistant setup, including data validation logic.
前端界面与表单设计规范。定义用户画像初始化流程、AI 助手定制表单及数据校验逻辑。
When not to use it
- →When developing backend logic
- →When designing non-frontend components
- →When not adhering to the specified step-by-step onboarding flow
Limitations
- →Frontend field names must exactly match the `api/request-schema.md`.
- →Identity details fields are dynamically displayed based on `identity_type`.
- →The chat and settings pages require checking `localStorage` for `userId`.
How it compares
This workflow provides a structured, multi-stage user onboarding process and AI assistant setup, unlike a single-page registration.
Compared to similar skills
frontend-design side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-design (this skill) | 0 | 4mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| penpot-uiux-design | 27 | 6mo | Review | Advanced |
| design-context | 1 | 7mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
design-context
WellApp-ai
Refresh UI/UX context from design system, Storybook, and codebase
userinterface-wiki
raphaelsalaja
UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.
frontend-design
darthlinuxer
Design thinking and decision-making for web UI. Use when designing components,
front-design
WBInCode
**DESIGN SKILL** — Tworzenie ultrazawansowanych, autorskich interfejsów UI/UX o jakości Awwwards SOTD/Site of the Year, łączących produkcyjną solidność (business CRM, dashboardy, panele) z efektem "wow" (showcase, landing, prezentacje dla klienta). USE FOR: projektowanie i implementacja stron, dashb