Skills design-taste-frontend
📦
design-taste-frontend
Content revision r1 Safe ⚙️ External commands🌐 Network access
Build Polished Frontend Interfaces
AI-generated interfaces often look generic or miss production details. This skill gives Claude, Codex, and Claude Code strict design and frontend guardrails.
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 "design-taste-frontend" from https://skillstore.io/skills/leonxlnx-design-taste-frontend.md and its manifest at https://skillstore.io/api/skills/leonxlnx-design-taste-frontend/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 "design-taste-frontend". Improve a SaaS billing page that feels flat and generic.
Expected outcome:
- A clearer information hierarchy with restrained color and sharper typography.
- Responsive sections that avoid generic equal-card rows.
- Loading, empty, error, and active states for billing actions.
Using "design-taste-frontend". Create a product analytics dashboard with motion.
Expected outcome:
- A dense dashboard layout using lines and spacing instead of excessive cards.
- Motion guidance that uses transform and opacity for smoother performance.
- A review checklist for mobile collapse, dependency use, and animation isolation.
Security Audit
Safev4 • 7/6/2026 Open versioned report
All static findings were reviewed against SKILL.md. The backtick, URL, and reconnaissance hits are Markdown prose or frontend guidance, not executable behavior. No prompt injection, exfiltration intent, or unsafe automation evidence was found.
1
Files scanned
227
Lines analyzed
0
Review items
0
False positives ignored
Risk Factors
⚙️ External commands (54)
SKILL.md:18 SKILL.md:19 SKILL.md:20 SKILL.md:21 SKILL.md:22 SKILL.md:24 SKILL.md:25 SKILL.md:28 SKILL.md:29 SKILL.md:30 SKILL.md:31 SKILL.md:32 SKILL.md:39 SKILL.md:40 SKILL.md:41 SKILL.md:42 SKILL.md:50 SKILL.md:53 SKILL.md:61 SKILL.md:64 SKILL.md:68 SKILL.md:69 SKILL.md:70 SKILL.md:71 SKILL.md:72 SKILL.md:75 SKILL.md:76 SKILL.md:77 SKILL.md:82 SKILL.md:83 SKILL.md:84 SKILL.md:85 SKILL.md:88 SKILL.md:89 SKILL.md:90 SKILL.md:95 SKILL.md:101 SKILL.md:102 SKILL.md:108 SKILL.md:119 SKILL.md:124 SKILL.md:125 SKILL.md:197 SKILL.md:198 SKILL.md:199 SKILL.md:201 SKILL.md:205 SKILL.md:206 SKILL.md:208 SKILL.md:212 SKILL.md:215 SKILL.md:221 SKILL.md:222 SKILL.md:223
🌐 Network access (1)
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/leonxlnx-design-taste-frontend/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/leonxlnx-design-taste-frontend?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/leonxlnx-design-taste-frontend?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/leonxlnx-design-taste-frontend/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/leonxlnx-design-taste-frontend.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
leonxlnx. (2026). design-taste-frontend security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/leonxlnx-design-taste-frontend/audits/4BibTeX citation
@techreport{leonxlnx-leonxlnx-design-taste-frontend-2026,
author = {leonxlnx},
title = {design-taste-frontend security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/leonxlnx-design-taste-frontend/audits/4},
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: "design-taste-frontend security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "leonxlnx"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/leonxlnx-design-taste-frontend/audits/4"
identifiers:
- type: other
value: "skillstore:leonxlnx-design-taste-frontend:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: High 55
Architecture
85
Maintainability
87
Content
69
Community
83
Spec Compliance
What You Can Build
Refine React Screens
Improve a rough React or Next.js screen with clearer hierarchy, responsive layouts, and complete UI states.
Set Visual Guardrails
Apply strict rules for typography, color, spacing, and motion before an agent writes interface code.
Ship Better Prototypes
Turn a product idea into a polished prototype with practical design constraints and performance checks.
Try These Prompts
Improve a Single Screen
Use design-taste-frontend to improve this screen. Preserve the current stack. Focus on spacing, typography, color restraint, and mobile behavior.
Generate a Dashboard UI
Create a React dashboard for [product]. Use dense data layout rules, complete loading and empty states, and no generic card grid.
Add Motion Safely
Add motion to this interface. Keep animations isolated in client components. Use transform and opacity only. Include cleanup for any effects.
Audit a Full Flow
Review this multi-page frontend flow. Identify weak visual hierarchy, missing states, risky motion, and responsive issues before editing code.
Best Practices
- Share product context, target users, and existing brand constraints before asking for implementation.
- Ask the agent to inspect package.json before adding any third-party UI or motion library.
- Review mobile layouts and motion performance after each generated frontend change.
Avoid
- Do not use the skill to override an existing design system without approval.
- Do not request heavy perpetual animation for data-dense or low-power mobile workflows.
- Do not accept new dependencies unless the project supports them or the team approves installation.
Frequently Asked Questions
Does this skill write frontend code?
It guides an AI agent while it writes or reviews frontend code. It does not ship components by itself.
Which stacks does it target?
It favors React, Next.js, Tailwind CSS, and common motion libraries. The user can request a different stack.
Can it work with Claude, Codex, and Claude Code?
Yes. The content is instruction based and lists support for Claude, Codex, and Claude Code.
Does it require network access?
No. The skill is a Markdown instruction file. It may reference placeholder image URLs as examples.
Will it install dependencies automatically?
No. It tells the agent to check package.json and show install commands when a package is missing.
Is it safe for production projects?
It is suitable as guidance, but generated code still needs normal review, testing, and accessibility checks.