Skills frontend-design

📦

frontend-design

Name: frontend-design
Author: pbakaus

Content revision r1 Safe

Build Distinctive Frontend Interfaces

Generic AI interfaces often feel repetitive, inaccessible, and visually weak. This skill guides Claude, Codex, and Claude Code toward polished frontend work with clear visual direction.

Supports: Claude Codex Code(CC)

🥉 78 Bronze

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/pbakaus-frontend-design.md and its manifest at https://skillstore.io/api/skills/pbakaus-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.

Markdown detail GET /skills/pbakaus-frontend-design.md Signed manifest GET /api/skills/pbakaus-frontend-design/manifest Signed lockfile GET /api/skills/pbakaus-frontend-design/lockfile

Test it

Using "frontend-design". Create a dashboard for a small finance team.

Expected outcome:

A polished dashboard concept with a restrained palette, dense tables, clear status states, and accessible controls.
Responsive layout guidance for desktop review work and smaller approval workflows.

Using "frontend-design". Redesign a signup form for mobile.

Expected outcome:

A form layout with visible labels, focus rings, validation on blur, plain error messages, and touch-friendly controls.

Using "frontend-design". Design a landing page for a new camera app.

Expected outcome:

A first screen with product-first imagery, distinctive type, responsive layout, and interaction details that avoid generic templates.

Security Audit

Safe

v6 • 7/9/2026 Open versioned report

All 25 static findings are false positives caused by frontend-design terminology such as input, invalid, grid, outline, device, and hover. The reviewed files contain Markdown design guidance only, with no prompt injection, executable scripts, network behavior, filesystem access, or credential handling.

Files scanned

941

Lines analyzed

Review items

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.

Open versioned report

Copy report link

https://skillstore.io/skills/pbakaus-frontend-design/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/pbakaus-frontend-design/security.svg)](https://skillstore.io/skills/pbakaus-frontend-design?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/pbakaus-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/pbakaus-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/pbakaus-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

pbakaus. (2026). frontend-design security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/pbakaus-frontend-design/audits/6

BibTeX citation

@techreport{pbakaus-pbakaus-frontend-design-2026,
  author = {pbakaus},
  title = {frontend-design security audit report (audit version 6)},
  institution = {Skillstore},
  year = {2026},
  number = {6},
  url = {https://skillstore.io/skills/pbakaus-frontend-design/audits/6},
  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 6)"
version: "unspecified"
type: report
authors:
  - name: "pbakaus"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/pbakaus-frontend-design/audits/6"
identifiers:
  - type: other
    value: "skillstore:pbakaus-frontend-design:audit:6"
    description: "Skillstore immutable audit report identifier"

Compare variants

18 installable variants

Each 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

anthropics

frontend-design

Skillstore Score 79

Evidence Confidence High

Skillstore usage 467

Updated

2026-08-21

ZhanlinCui

zhanlincui-frontend-design

Skillstore Score 79

Evidence Confidence High

Skillstore usage 363

Updated

2026-08-21

YYH211

yyh211-frontend-design

Skillstore Score 79

Evidence Confidence High

Skillstore usage 207

Updated

2026-08-21

1bertogit

1bertogit-frontend-design

Skillstore Score 79

Evidence Confidence High

Skillstore usage 188

Updated

2026-08-21

92Bilal26

92bilal26-frontend-design

Skillstore Score 79

Evidence Confidence High

Skillstore usage 24

Updated

2026-08-21

AdamAugustinsky

adamaugustinsky-frontend-design

Skillstore Score 79

Evidence Confidence High

Skillstore usage 19

Updated

2026-08-21

am-will

am-will-frontend-design

Skillstore Score 79

Evidence Confidence High

Skillstore usage 18

Updated

2026-08-21

Azeem-2

azeem-2-frontend-design

Skillstore Score 79

Evidence Confidence High

Skillstore usage 17

Updated

2026-08-21

CesarAugustusGroB

cesaraugustusgrob-frontend-design

Skillstore Score 79

Evidence Confidence High

Skillstore usage 15

Updated

2026-08-21

davila7

davila7-frontend-design

Skillstore Score 79

Evidence Confidence High

Skillstore usage 10

Updated

2026-08-21

anthropics

anthropics-frontend-design

Skillstore Score 78

Evidence Confidence High

Skillstore usage 124

Updated

2026-08-21

pbakaus Current

pbakaus-frontend-design

Skillstore Score 78

Evidence Confidence High

Skillstore usage 84

Updated

2026-08-21

7Spade

7spade-frontend-design

Skillstore Score 78

Evidence Confidence High

Skillstore usage 43

Updated

2026-08-21

sickn33

sickn33-frontend-design

Skillstore Score 78

Evidence Confidence High

Skillstore usage 25

Updated

2026-08-21

AgentWorkforce

agentworkforce-frontend-design

Skillstore Score 78

Evidence Confidence High

Skillstore usage 16

Updated

2026-08-21

AJV009

ajv009-frontend-design

Skillstore Score 78

Evidence Confidence High

Skillstore usage 12

Updated

2026-08-21

DennisLiuCk

dennisliuck-frontend-design

Skillstore Score 76

Evidence Confidence High

Skillstore usage 6

Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Upgrade Product UI Direction

Turn a rough feature idea into a stronger interface direction with typography, layout, motion, and copy guidance.

Build Polished Components

Create components that include responsive behavior, keyboard states, loading states, and accessible form patterns.

Prototype Memorable Pages

Move from generic landing pages to distinctive product screens with a clear visual point of view.

Try These Prompts

Design a Single Component

Use the frontend-design skill to create a polished pricing card for [product]. Include accessible states, responsive behavior, and refined typography.

Redesign a Page

Apply frontend-design to redesign this [page or screen]. Keep the existing content, but improve hierarchy, spacing, colors, and mobile layout.

Create a Design System Direction

Use frontend-design to define a visual direction for [app]. Include tokens, type scale, color roles, motion rules, and component patterns.

Build and Validate an Interface

Use frontend-design to implement [interface] in [framework]. Verify responsiveness, keyboard access, reduced motion, contrast, and visual polish.

Best Practices

Give the skill concrete product context, user goals, brand constraints, and target devices.
Ask for accessibility, responsive behavior, and state design in the same prompt.
Review generated visuals on real screen sizes before accepting the design.

Avoid

Requesting only a beautiful page without content, audience, or product context.
Using the skill to force decorative effects when the product needs a quiet operational interface.
Accepting generated UI without testing focus states, text overflow, contrast, and reduced motion.