← 返回 Skills 市场
Frontend Design
作者
Tony Simons
· GitHub ↗
· v1.0.0
· MIT-0
114
总下载
0
收藏
0
当前安装
1
版本数
在 OpenClaw 中安装
/install agentic-atlas-frontend-design
功能描述
Generates production-ready UI components from natural language. Use when the user asks to design a component, create a button, build a form, prototype a layo...
使用说明 (SKILL.md)
Frontend Design Skill
Generates production-ready UI components from natural language descriptions.
Instructions
When the user requests a UI component, layout, or frontend feature:
- Ask clarifying questions if the request is ambiguous (responsive? dark mode? existing design system?)
- Generate the component using React + Tailwind CSS by default
- Output the complete component code with all props, state management, and accessibility attributes
- Include ARIA labels, keyboard navigation, and semantic HTML
- Verify the component compiles without errors before presenting
Features
- React component generation with TypeScript
- Tailwind CSS output (default) with custom config support
- Responsive design (mobile-first)
- Dark mode support
- Animation and transition presets
- Accessibility audit integration (ARIA, keyboard nav, WCAG 2.1 AA)
- Component variants (primary, secondary, disabled states)
Output Format
Return the complete component code in a single code block with:
- Component name
- Props interface (TypeScript)
- Full implementation
- Usage example
- Accessibility notes
Example
User: "Create a user profile card with avatar, name, role, and a follow button"
→ Generate: React component with Avatar, typography hierarchy, FollowButton with hover state
Dependencies
Requires: Node.js, React, Tailwind CSS (installed in the project)
安全使用建议
This skill appears to do what it says — generate production-ready React + Tailwind components. Before installing or invoking it: 1) Be aware that the SKILL.md asks the agent to "verify the component compiles" but gives no safe method for doing so; explicitly restrict the agent from running build commands or accessing your filesystem unless you intend that. 2) Ensure your project actually has Node/React/Tailwind installed before expecting a drop-in component. 3) Review generated code before using it in production (security, props validation, and dependency choices). If you want the agent to also run builds or tests, require explicit, manual approval and a clear command list so you control what executes on your machine.
功能分析
Type: OpenClaw Skill
Name: agentic-atlas-frontend-design
Version: 1.0.0
The skill bundle contains standard instructions for an AI agent to generate React and Tailwind CSS components. The SKILL.md file defines a clear scope for frontend design tasks, including accessibility and responsive design, without any executable code, suspicious network requests, or malicious prompt-injection patterns.
能力评估
Purpose & Capability
Name/description ask for React/Tailwind UI component generation and the SKILL.md only requests producing TypeScript React components with Tailwind. Declared runtime dependencies (Node.js/React/Tailwind) match the stated purpose.
Instruction Scope
Most instructions stay on-scope (ask clarifying questions, generate accessible React+Tailwind code, include usage examples). One instruction — "Verify the component compiles without errors before presenting" — is vague: it implies running a build or tests or accessing the user's project, but the skill provides no commands or permissions for doing that. This could cause an agent to attempt filesystem access or execute local build commands if left unconstrained.
Install Mechanism
Instruction-only skill with no install spec and no packages downloaded. Lowest-risk install profile.
Credentials
No environment variables, credentials, or config paths are requested. The only external requirement is having Node/React/Tailwind in the user's project, which is appropriate for the task.
Persistence & Privilege
Skill is not forced always-on and does not request persistent or elevated privileges. Autonomous invocation is allowed (default) but is not combined with other concerning factors.
如何使用
- 确保已安装 OpenClaw（本地或 Docker 部署）
- 在对话框中输入安装命令：
/install agentic-atlas-frontend-design - 安装完成后，直接呼叫该 Skill 的名称或使用
/agentic-atlas-frontend-design触发 - 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
v1.0.0
Initial release of frontend-design skill:
- Generates production-ready UI components from natural language prompts.
- Outputs React + Tailwind CSS code by default, including TypeScript types.
- Integrates accessibility best practices: ARIA, keyboard navigation, semantic HTML.
- Supports responsive design, dark mode, and component variants.
- Provides complete code examples with usage and accessibility guidance.
- Designed for frontend/UI tasks only (not backend, API, or database).
元数据
常见问题
Frontend Design 是什么？
Generates production-ready UI components from natural language. Use when the user asks to design a component, create a button, build a form, prototype a layo... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 114 次。
如何安装 Frontend Design？
在 OpenClaw 或 Claude Code 对话框中运行命令「/install agentic-atlas-frontend-design」即可一键安装，无需额外配置。
Frontend Design 是免费的吗？
是的，Frontend Design 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。
Frontend Design 支持哪些平台？
Frontend Design 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。
谁开发了 Frontend Design？
由 Tony Simons（@asimons81）开发并维护，当前版本 v1.0.0。
推荐 Skills