skills.rest
timgranlundmarsden
timgranlundmarsdenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-rules

Review frontend UI changes for design direction, accessibility, script safety, and visual correctness across devices.

2|1|Updated Apr 9, 2026
Search Tags:#ui#accessibility#frontend#react#css#visual-testing#browser-apis
One-click install
npx skills add https://github.com/timgranlundmarsden/claude-agent-flow --skill frontend-rules-timgranlundmarsden
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-rules
Source: https://github.com/timgranlundmarsden/claude-agent-flow/tree/main/skills/frontend-rules
Command: npx skills add https://github.com/timgranlundmarsden/claude-agent-flow --skill frontend-rules-timgranlundmarsden

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend work often drifts into inconsistent styling, weak accessibility, and fragile browser-side behavior, creating UI that looks unfinished or breaks across devices.

Core Features & Use Cases

  • Design-First Guidance: Forces a clear aesthetic direction before implementation so UI changes feel intentional and memorable.
  • Frontend Boundary Rules: Keeps the work focused on components, styling, client-side state, routing, accessibility, and browser APIs without crossing into backend or infrastructure concerns.
  • Safe External Script Handling: Encourages isolated script usage, verified SRI only when hashes are confirmed, and graceful degradation when a CDN fails.
  • Visual Verification Workflow: Requires mobile and desktop checks after HTML or CSS changes to catch layout regressions before completion.

Quick Start

Use the frontend-rules skill to review this UI change for design direction, accessibility, script safety, and mobile and desktop visual correctness.

Frequently Asked Questions about frontend-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I ensure consistent styling and accessibility when building React UI components?▼

To ensure consistent styling and accessibility in React, establish a clear aesthetic direction before implementation and enforce strict frontend scope for components, client-side state, and routing. This prevents UI styling drift and weak accessibility outcomes.

What is the best way to prevent layout regressions across mobile and desktop browsers?▼

The best way to prevent layout regressions is to implement a visual verification workflow that requires explicit mobile and desktop checks after any HTML or CSS changes, catching breaks before UI completion.

How do I safely handle external scripts and browser APIs without breaking my frontend application?▼

Safely handle external scripts and browser APIs by isolating script usage, applying verified SRI only when hashes are confirmed, and ensuring graceful degradation if a CDN fails. This prevents fragile browser-side behavior.

Can I use this frontend workflow for Vue and Svelte as well as React?▼

Yes, you can use this workflow for Vue and Svelte as well as React. It applies broadly to HTML, CSS, client-side state, accessibility, routing, and browser API work across these frameworks.

Why does my UI look unfinished or break across different devices?▼

Your UI may look unfinished or break across devices due to inconsistent styling, weak accessibility, and fragile browser-side behavior. Implementing design-first guidance and visual verification checks resolves this drift.

Related Skills

Explore More Software Engineering Skills→
Holo00Holo00
6

frontend-design

Creates distinctive frontend interfaces with design frameworks and CSS theming.

Community
Intermediate
TrevorSTrevorS

playwright-e2e

Detect visual regressions in Svelte UI changes with Playwright screenshots.

Community
Intermediate
cdman28cdman28

frontend-developer

Build scalable frontend interfaces with reusable components, state management, and API integration.

Community
Advanced
tomtoto757tomtoto757
3

secure-checkout

Harden ecommerce checkout pages with TLS enforcement, CSP headers, and payment tokenization.

Community
Advanced