skills.rest
f4rkh4d
f4rkh4dCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

forge-frontend

Enforce frontend UI style constraints for React/TSX generation.

Updated Aug 27, 2026
Search Tags:#typography#design systems#tailwind#landing pages#anti-slop#verifier#frontend ui
One-click install
npx skills add https://github.com/f4rkh4d/forge-skill --skill forge-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: forge-frontend
Source: https://github.com/f4rkh4d/forge-skill/tree/main/skills/design/forge-frontend
Command: npx skills add https://github.com/f4rkh4d/forge-skill --skill forge-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

forge-frontend prevents AI-generated UI slop by enforcing sharper layout, typography, spacing, color, motion, and iconography rules so your output looks intentional instead of baseline and “emotionally flat.”

Core Features & Use Cases

  • Avoids known visual failure modes: blocks the canonical indigo/violet CTA gradient, card-in-card-in-card nesting, emoji icons, stock-photo placeholders, overly cramped section spacing, and too many headline/font sizes per section.
  • Enforces a deliberate design system: requires asymmetric grid composition, constrained typography (display + body + optionally mono), and disciplined line length and headline wrapping limits.
  • Guides motion and interaction: forbids linear easing on hover/transitions, disallows animation without a clear user intent, and recommends specific easing tokens.

Quick Start

Use forge-frontend when you want an AI coding agent to redesign or generate a landing page, dashboard, marketing site, or greenfield UI with premium spacing, typography, and palette choices that reject common AI fingerprints.

Frequently Asked Questions about forge-frontend

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

FAQPage Schema
How do I stop AI-generated landing pages from looking like generic AI slop?▼

To prevent AI slop in generated landing pages, enforce frontend UI style constraints that block indigo/violet CTA gradients, limit card nesting depth, enforce a three-color palette, and mandate specific spacing and typography rules.

Why does my AI-generated dashboard UI have emotionally flat typography and layout?▼

AI-generated dashboard UI appears emotionally flat when it lacks a deliberate design system, failing to constrain typography stacks, enforce asymmetric grid composition, and limit headline font sizes per section.

What's the best way to enforce a three-color palette and spacing rules in React TSX generation?▼

The best way to enforce a three-color palette and spacing rules in React TSX generation is to apply frontend UI style constraints that reject common AI fingerprints and require concrete design tokens for layout and composition.

Does this approach to frontend UI design work for greenfield components and marketing sites?▼

Yes, this frontend UI design approach works for greenfield components and marketing sites by preserving visual quality and consistency through enforced typography, color, motion, and iconography rules across React and TSX generation.

Why does my AI-generated frontend UI use linear easing on hover transitions?▼

AI-generated frontend UI defaults to linear easing on hover transitions when motion guidance is absent, requiring specific easing tokens and clear user intent to forbid linear easing and eliminate non-premium interaction design.

When should I not use anti-slop frontend UI constraints for Tailwind design systems?▼

You should not use anti-slop frontend UI constraints for Tailwind design systems when your project intentionally requires stock-photo placeholders, emoji icons, or indigo/violet CTA gradients that conflict with the enforced three-color palette heuristic.

Related Skills

Explore More Design & Creative Skills→
lilbom32lilbom32

clb-frontend

Build and style Next.js 15 pages and React/TSX components with Tailwind CSS.

Community
Advanced
cericocerico

creative-design

Define typography, color, motion, and spacing for landing page UI.

Community
Basic
try-workstry-works
95

swiss-design

Apply Swiss International Style design principles using Tailwind CSS and IBM Plex Sans.

Community
Intermediate
beyondkmpbeyondkmp
1

brand-guidelines

Apply Anthropic brand colors, typography, and visual styling to artifacts.

Community
Basic