📦
planning-with-files
83Organize Long AI Tasks with Planning Files
Long AI sessions can lose goals, decisions, and progress. This skill guides Claude, Codex, and Claude Code to store plans, findings, and logs in project files.
Productivity View
Skills frontend-design
📦
frontend-design
Content revision r1 Safe
Build Distinctive Frontend Interfaces
Generic web interfaces can feel unfinished and forgettable. This skill guides Claude, Codex, and Claude Code toward polished frontend work with clear visual direction.
Supports: Claude Codex Code(CC)
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Agent request
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/zhanlincui-frontend-design.md and its manifest at https://skillstore.io/api/skills/zhanlincui-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "frontend-design". Create a landing page for a climate data startup.
Expected outcome:
A polished page concept with scientific typography, restrained color, clear sections, responsive structure, and purposeful motion cues.
Using "frontend-design". Improve a plain admin dashboard.
Expected outcome:
- Sharper information hierarchy and denser scan paths.
- More deliberate colors, spacing, and table states.
- A working frontend direction suitable for repeated use.
Using "frontend-design". Prototype a portfolio homepage for an illustrator.
Expected outcome:
A characterful visual direction with expressive typography, gallery-focused layout, custom details, and responsive behavior.
Security Audit
Safev5 • 7/8/2026 Open versioned report
All three static findings are false positives from design guidance language in SKILL.md. No prompt injection, data exfiltration, command execution, or harmful intent was found in the reviewed file.
1
Files scanned
43
Lines analyzed
0
Review items
0
False positives ignored
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: codex View Audit History →
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/zhanlincui-frontend-design/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/zhanlincui-frontend-design?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/zhanlincui-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/zhanlincui-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/zhanlincui-frontend-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
ZhanlinCui. (2026). frontend-design security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/zhanlincui-frontend-design/audits/5BibTeX citation
@techreport{zhanlincui-zhanlincui-frontend-design-2026,
author = {ZhanlinCui},
title = {frontend-design security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/zhanlincui-frontend-design/audits/5},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-design security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "ZhanlinCui"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/zhanlincui-frontend-design/audits/5"
identifiers:
- type: other
value: "skillstore:zhanlincui-frontend-design:audit:5"
description: "Skillstore immutable audit report identifier"
Compare variants
18 installable variantsEach author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.
Why this variant is first
Highest Skillstore Score
Author / source Skillstore Score Evidence Confidence Skillstore usage Updated
AI-Vibe-Prompts Recommended
atman36-frontend-design
Skillstore Score 81
Evidence Confidence High
Skillstore usage 32
Updated
2026-08-21
frontend-design
Skillstore Score 79
Evidence Confidence High
Skillstore usage 467
Updated
2026-08-21
ZhanlinCui Current
zhanlincui-frontend-design
Skillstore Score 79
Evidence Confidence High
Skillstore usage 363
Updated
2026-08-21
yyh211-frontend-design
Skillstore Score 79
Evidence Confidence High
Skillstore usage 207
Updated
2026-08-21
1bertogit-frontend-design
Skillstore Score 79
Evidence Confidence High
Skillstore usage 188
Updated
2026-08-21
92bilal26-frontend-design
Skillstore Score 79
Evidence Confidence High
Skillstore usage 24
Updated
2026-08-21
adamaugustinsky-frontend-design
Skillstore Score 79
Evidence Confidence High
Skillstore usage 19
Updated
2026-08-21
am-will-frontend-design
Skillstore Score 79
Evidence Confidence High
Skillstore usage 18
Updated
2026-08-21
azeem-2-frontend-design
Skillstore Score 79
Evidence Confidence High
Skillstore usage 17
Updated
2026-08-21
cesaraugustusgrob-frontend-design
Skillstore Score 79
Evidence Confidence High
Skillstore usage 15
Updated
2026-08-21
davila7-frontend-design
Skillstore Score 79
Evidence Confidence High
Skillstore usage 10
Updated
2026-08-21
anthropics-frontend-design
Skillstore Score 78
Evidence Confidence High
Skillstore usage 124
Updated
2026-08-21
pbakaus-frontend-design
Skillstore Score 78
Evidence Confidence High
Skillstore usage 84
Updated
2026-08-21
7spade-frontend-design
Skillstore Score 78
Evidence Confidence High
Skillstore usage 43
Updated
2026-08-21
sickn33-frontend-design
Skillstore Score 78
Evidence Confidence High
Skillstore usage 25
Updated
2026-08-21
agentworkforce-frontend-design
Skillstore Score 78
Evidence Confidence High
Skillstore usage 16
Updated
2026-08-21
ajv009-frontend-design
Skillstore Score 78
Evidence Confidence High
Skillstore usage 12
Updated
2026-08-21
dennisliuck-frontend-design
Skillstore Score 76
Evidence Confidence High
Skillstore usage 6
Updated
2026-08-21
Skillstore Score
Why this score Evidence Confidence: High 55
Architecture
85
Maintainability
87
Content
77
Community
91
Spec Compliance
What You Can Build
Create a Launch Page
Turn a product brief into a memorable landing page with distinctive layout, typography, color, and motion direction.
Refresh an Existing Interface
Improve a plain dashboard or app screen with stronger hierarchy, spacing, interaction states, and visual identity.
Prototype a Visual Direction
Explore bold aesthetic options for a campaign, internal tool, or client presentation before committing to production work.
Try These Prompts
Design a Simple Page
Build a one-page website for a small bakery. Use HTML and CSS. Make it polished, distinctive, and easy to scan.
Improve an Existing Screen
Redesign this dashboard screen. Keep the same information. Improve hierarchy, typography, color, spacing, and interaction states.
Create a React Interface
Create a React component for a music analytics dashboard. Choose a strong visual concept. Include responsive layout, states, and motion details.
Build a Complete Visual System
Design and implement a frontend for a research workflow app. Define the aesthetic direction, core screens, reusable patterns, and responsive behavior.
Best Practices
- Provide the audience, product goal, required framework, and brand constraints.
- Ask for working implementation details when you need usable frontend code.
- Review accessibility, responsiveness, and performance after the first generated version.
Avoid
- Do not ask for a generic beautiful page without context or audience.
- Do not rely on this skill as a replacement for product requirements.
- Do not skip testing when animations, fonts, or responsive layouts are added.
Frequently Asked Questions
What does this skill help create?
It helps create distinctive frontend pages, components, dashboards, posters, and web applications with working implementation guidance.
Does it generate production code?
It asks the assistant to produce working frontend code when the user requests implementation.
Which tools can use it?
The report lists support for Claude, Codex, and Claude Code.
Can it follow an existing brand system?
Yes, but you should provide brand colors, fonts, spacing rules, and examples.
Does it include accessibility checks?
It mentions accessibility as a constraint, but final compliance still needs project-specific review.
Is it only for React?
No. It can guide HTML, CSS, JavaScript, React, Vue, and similar frontend work.
Developer Details
Author
ZhanlinCuiLicense
Complete terms in LICENSE.txt
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
64ca8af0f54a325752f08bd54e52151061ea659a
Maintenance freshness
7/20/2026
Usage
357 downloads · 278 views
File structure
📄 SKILL.md
More from ZhanlinCui
View all📦
github-release-assistant
83Generate Bilingual GitHub Release READMEs
Release notes and README updates can take time before each GitHub release. This skill generates bilingual release documentation and guides review, commit, and push steps.
Documentation View
📦
obsidian-helper
81Organize Obsidian Notes with AI
Obsidian vaults can become hard to review and update consistently. This skill helps Claude and Codex create daily notes, capture ideas, and summarize recent work.
Productivity View
📦
Process PDFs with Extraction and Form Tools
PDF work often requires separate tools for text, tables, pages, and forms. This skill gives Claude, Codex, and Claude Code guided workflows and helper scripts for PDF tasks.
Office & Reports View
📦
brainstorming
79Plan Creative Work Before Building
Teams often start implementation before goals, constraints, and trade-offs are clear. This skill guides Claude, Codex, and Claude Code through structured brainstorming before design work begins.
Productivity View
📦
doc-coauthoring
79Draft Reader-Tested Documentation
Complex documents often fail when readers lack the author's context. This skill guides context gathering, section drafting, iterative edits, and reader testing.
Documentation View
Related Skills
View all📦
ui-design
80Design Distinctive UI Prototypes
by tencentcloudbase
Generic AI interfaces often lack visual direction and platform-aware detail. This skill guides Claude, Codex, and Claude Code to define design intent before building prototypes.
Design & Creative View
📦
shape
81Plan UX Before Building
by pbakaus
Teams often build interfaces before clarifying user goals, states, and constraints. This skill guides discovery and produces a design brief for implementation.
Design & Creative View
📦
generative-art
81Create Interactive Generative Art
by Cam10001110101
Artists and teams need reproducible generative art that can be explored without setup. This skill turns a concept into a seeded p5.js HTML artifact with controls and PNG export.
Design & Creative View
📦
ui-ux-designer
79Design Accessible Product Interfaces
by sickn33
Teams often struggle to turn user needs into consistent, accessible interfaces. This skill guides research, flows, design systems, tokens, and handoff.
Design & Creative View
📦
stitch-ui-design
79Create Better Google Stitch UI Prompts
by sickn33
Google Stitch can produce generic designs when prompts lack detail. This skill provides structured prompt guidance for screens, flows, visual style, accessibility, and handoff.
Design & Creative View
📦
extract
79Extract Reusable Design System Patterns
by pbakaus
Teams often duplicate UI components, tokens, and layout patterns across an application. This skill helps Claude, Codex, or Claude Code find reusable patterns and consolidate them into a maintained design system.
Design & Creative View