frontend-design SKILL.md skillA
frontend-design from seaworld008/commonly-used-high-value-skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add seaworld008/commonly-used-high-value-skills/frontend-design@v1.0.1Pins v1.0.1 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- seaworld008/commonly-used-high-value-skills
- Path
openclaw-skills/frontend-design/SKILL.md- Versions recorded
- 5
- Latest version
- v1.0.1, committed Sep 6, 2026
- First version recorded
- Mar 8, 2026
- Size
- 6,685 bytes
- Repository stars
- 73
- License
- MIT
Design and implement polished web components, pages, and applications with a coherent visual direction and usable interaction states.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Frontend Design (高级前端设计) Frontend Design 技能致力于创建极具辨识度、生产级且具备高审美水准的前端界面。本技能不仅生成可运行的代码，更融入了深厚的“设计思维”，坚决避免平庸的、流水线式的“AI 塑料感”审美，助力开发者打造令人难忘的数字体验。 ## 安装与使用建议 ```bash # 无需安装，此为指导性技能 # 在启动 Web Artifact 或前端页面开发前激活 ``` ## 设计思维 (Design Thinking) 在编写代码之前，必须先确定一个 **大胆且明确** 的审美方向： - **明确目的 (Purpose)**：该界面解决什么问题？受众是谁？是极客工具、奢侈品电商还是艺术展示？ - **选定基调 (Tone)**：在极端之间做选择 —— 绝对简约 (Brutally Minimal)、极致主义混乱 (Maximalist Chaos)、复古未来主义 (Retro-futuristic)、有机自然感 (Organic/Natural)、高级精致感 (Luxury/Refined)、玩具感 (Playful/Toy-like)、杂志排版感 (Editorial/Magazine)、新粗犷主义 (Neo-brutalism)。 - **约束边界 (Constraints)**：框架要求（React/Vue）、性能阈值、无障碍 (Accessibility) 标准。 - **差异化点 (Differentiation)**：什么是该页面的“灵魂”？是一个独特的转场动画、一种从未见过的网格布局，还是极具张力的排版？ **关键原则**：无论选择哪种风格，执行必须精准。简约不代表简陋，繁复不代表杂乱。意图比强度更重要。 ## 核心能力 / Core Capabilities ### 1. 突破常规的排版系统 (Advanced Typography) - **操作步骤**： 1. 放弃 Arial, Inter, Roboto 等通用字体。 2. 寻找具备性格的字体对：一个极具冲击力的标题字（Display Font）搭配一个极致可读的正文字（Body Font）。 3. 利用 `clamp()` 函数实现流式排版（Fluid Typography），确保在任何屏幕上都具备完美的节奏感。 - **最佳实践**：使用超大字号作为背景装饰，或尝试垂直/斜向排版。 ### 2. 深度质感与氛围营造 (Atmosphere & Texture) - **操作步骤**： 1. 放弃纯色背景。 2. 使用 CSS 渐变网格 (Gradient Meshes)、噪点纹理 (Noise Textures)、几何图案层叠或磨砂玻璃 (Glassmorphism) 效果。 …
Read the whole file at its exact version.
How to install
mdr add seaworld008/commonly-used-high-value-skills/frontend-design@sha256:99572db2097b44dcThe line at the top of this page pins the label v1.0.1, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_qi3hx4qcw7jhhp47)
1 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 5 versions of this file, between Mar 8, 2026 and Sep 6, 2026, about one every 46 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| v1.0.1 latest | 2026-09-06 | e36bbe4 | 6,685 B | A | view · diff |
| v1.0.0 | 2026-06-29 | eafe326 | 6,951 B | A | view · diff |
| v1.0.0 | 2026-04-25 | be5efe5 | 6,838 B | A | view · diff |
| v1.0.0 | 2026-03-27 | 0b34652 | 6,838 B | A | view · diff |
| git:20260308.99bcec4 | 2026-03-08 | 99bcec4 | 4,442 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (6685 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
seaworld008/commonly-used-high-value-skills · 73 stars · license MIT · pushed 2026-10-19 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_qi3hx4qcw7jhhp47 GET https://markdownregistry.com/api/v1/resolve?ref=seaworld008/commonly-used-high-value-skills/frontend-design GET https://markdownregistry.com/api/v1/blob/99572db2097b44dcf7128bfbca9ad7381aba6cf6a9bb3ca49597e8bf54cf0d64
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.
More from seaworld008/commonly-used-high-value-skills
Every file in seaworld008/commonly-used-high-value-skills