Skills frontend-aesthetics

📦

frontend-aesthetics

Content revision r1 Safe ⚙️ External commands🌐 Network access

Improve Frontend Visual Design

Generic frontend screens often look similar and miss brand focus. This skill guides typography, color, motion, and depth choices for clearer interfaces.

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-aesthetics" from https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics.md and its manifest at https://skillstore.io/api/skills/barnhardt-enterprises-inc-frontend-aesthetics/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/barnhardt-enterprises-inc-frontend-aesthetics.md Signed manifest GET /api/skills/barnhardt-enterprises-inc-frontend-aesthetics/manifest Signed lockfile GET /api/skills/barnhardt-enterprises-inc-frontend-aesthetics/lockfile

Test it

Using "frontend-aesthetics". Review a landing page that uses default fonts, a purple-to-blue gradient, and centered content.

Expected outcome:

Use a more distinctive heading font and keep the body font highly readable.
Replace the gradient-heavy accent treatment with one brand accent and restrained shadows.
Create a stronger layout rhythm with asymmetric alignment and clearer section hierarchy.

Using "frontend-aesthetics". Plan a dark dashboard for project monitoring.

Expected outcome:

Use a near-black base with slightly raised surfaces for cards and tables.
Reserve the primary accent for active states, main actions, and important metrics.
Add subtle hover transitions, loading states, and data update feedback.

Using "frontend-aesthetics". Improve a component library that feels inconsistent.

Expected outcome:

Standardize icon stroke style, corner radius, border opacity, and focus states.
Define separate treatments for primary, secondary, destructive, and disabled actions.
Review forms for persistent labels, specific validation messages, and readable contrast.

Security Audit

Safe

v8 • 7/6/2026 Open versioned report

The flagged external command findings are Markdown fences, inline formatting, or frontend template examples, not executable shell commands. The flagged network findings are public reference links, and the blocker findings are design guidance, not reconnaissance. No prompt injection attempt or malicious semantic intent was found.

3

Files scanned

1,084

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.

Open versioned report

Security Assessment

Copy report link

https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/barnhardt-enterprises-inc-frontend-aesthetics/security.svg)](https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics?utm_source=security_passport_badge)

HTML badge

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

Embed card

<iframe src="https://skillstore.io/embed/skills/barnhardt-enterprises-inc-frontend-aesthetics.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

Barnhardt-Enterprises-Inc. (2026). frontend-aesthetics security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8

BibTeX citation

@techreport{barnhardt-enterprises-inc-barnhardt-enterprises-inc-frontend-aesthetics-2026,
  author = {Barnhardt-Enterprises-Inc},
  title = {frontend-aesthetics security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8},
  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-aesthetics security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
  - name: "Barnhardt-Enterprises-Inc"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8"
identifiers:
  - type: other
    value: "skillstore:barnhardt-enterprises-inc-frontend-aesthetics:audit:8"
    description: "Skillstore immutable audit report identifier"

Compare variants

2 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

Barnhardt-Enterprises-Inc Recommended Current

barnhardt-enterprises-inc-frontend-aesthetics

Skillstore Score 79

Evidence Confidence High

Skillstore usage 78

Updated

2026-08-21

Crossbill-Highlights

crossbill-highlights-frontend-aesthetics

Skillstore Score 78

Evidence Confidence High

Skillstore usage 9

Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High

55

Architecture

85

Maintainability

87

Content

72

Community

91

Spec Compliance

What You Can Build

Polish a Product Dashboard

Improve data density, hierarchy, dark surfaces, hover states, and status indicators for a dashboard interface.

Review a Landing Page Direction

Find generic visual choices and replace them with stronger typography, focused accents, and useful motion.

Build a Branded UI Kit

Create practical rules for fonts, colors, components, icons, backgrounds, and interaction states.

Try These Prompts

Refresh a Simple Page

Use the frontend-aesthetics skill to improve this page. Focus on typography, one accent color, background depth, and clear hierarchy.

Review an Existing Interface

Audit this interface for generic visual patterns. List the highest impact design changes for fonts, colors, spacing, motion, and components.

Design a Dashboard System

Create a dashboard visual system using this skill. Define typography, dark surfaces, accent usage, table styling, status badges, and motion states.

Create a Brand-Specific Direction

Use the skill to create a distinctive frontend direction for this brand. Explain the visual rationale and give implementation guidance for key screens.

Best Practices

Choose one primary accent color and use semantic colors only for clear status meanings.
Use distinctive typography for headings while keeping body text readable and accessible.
Add purposeful motion for state changes, loading, hover feedback, and page transitions.

Avoid

Avoid default font stacks as the main brand expression for polished interfaces.
Avoid purple-blue gradients, rainbow accents, and multiple primary buttons on one screen.
Avoid flat dark backgrounds, white cards on dark surfaces, and vague form error messages.

Frequently Asked Questions

What does this skill improve?

It improves visual direction for frontend pages, dashboards, branded components, and interface reviews.

Does it generate complete application code?

No. It provides design guidance and implementation patterns that an agent can apply while building UI.

Which tools can use this skill?

The report lists support for Claude, Codex, and Claude Code.

Does it require internet access?

No. It includes reference links, but the core guidance is contained in the skill files.

Is it only for dark themes?

No. It emphasizes true dark examples, but the principles also apply to light branded interfaces.

Can it replace a human designer?

No. It helps agents avoid generic choices, but product context and brand judgment still matter.

Developer Details

Author

Barnhardt-Enterprises-Inc

License

MIT

Skillstore revision

r1

Version notice

The author did not declare a version.

Repository

https://github.com/Barnhardt-Enterprises-Inc/quetrex-plugin/tree/main/templates/skills/frontend-aesthetics

Ref

c4231f0153ccd2a2ed62274c5a372bf8f2386d3f

Maintenance freshness

7/18/2026

Usage

28 downloads · 323 views

File structure

📄 anti-patterns.md

📄 motion-patterns.md

More from Barnhardt-Enterprises-Inc

tdd-enforcer

Enforce Test-Driven Development Workflows

Teams often skip tests or write them after implementation. This skill guides Claude, Codex, and Claude Code through test-first delivery.

Coding & Development View

security-sentinel

Audit Code for Security Risks

Security-sensitive code is easy to ship with hidden flaws in authentication, input handling, and secrets. This skill gives Claude, Codex, and Claude Code structured security references and scanner guidance for safer reviews.

Security & Compliance View

typescript-strict

Write Strict TypeScript Safely

TypeScript projects can drift into unsafe patterns that hide runtime defects. This skill guides Claude, Codex, and Claude Code toward stricter type usage, clearer errors, and safer narrowing.

Coding & Development View

quality-gates

Enforce AI Coding Quality Gates

AI-assisted coding can miss tests, security checks, and release criteria. This skill gives Claude, Codex, and Claude Code a staged checklist for safer delivery.

Coding & Development View

drizzle-patterns

Build Drizzle PostgreSQL Patterns

Teams need consistent Drizzle ORM patterns for PostgreSQL projects. This skill provides schema, relation, query, mutation, transaction, and migration examples.

Coding & Development View

zod-validation-patterns

Build Zod Validation Schemas

Validation bugs create weak application boundaries and unclear user errors. This skill gives practical Zod patterns for TypeScript schemas, API validation, transforms, and typed results.

Coding & Development View

ui-design

Design 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

ui-ux-designer

Design 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

Create 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

Extract 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

frontend-design

Design Distinctive Production Frontends

by Atman36

Generic interfaces weaken product identity and usability. This skill guides purposeful visual direction, responsive implementation, motion, accessibility, and production-ready frontend code.

Design & Creative View

shape

Plan 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