skills.rest
kerem-ersoz
kerem-ersozCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Visual Patterns

Enforces consistent UI patterns across React/TypeScript projects with Codasms and CSS Modules.

Updated Aug 23, 2026
Search Tags:#typescript#frontend#react#design-system#ui-patterns#css-modules
One-click install
npx skills add https://github.com/kerem-ersoz/gonul --skill frontend-visual-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Visual Patterns
Source: https://github.com/kerem-ersoz/gonul/tree/main/.github/skills/frontend-patterns
Command: npx skills add https://github.com/kerem-ersoz/gonul --skill frontend-visual-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend Visual Patterns define a centralized, opinionated set of conventions to ensure consistent UI implementation, styling, and component architecture across React/TypeScript projects.

Core Features & Use Cases

  • Component structure and organization guidance for React + TypeScript, including CSS Modules and co-located styles
  • Design-system rules for typography, colors, spacing, modals, and animation guidelines to ensure pixel-accurate UI
  • Use Case: When building or debugging frontend features (UI components, modals, forms, or game interfaces), apply the patterns to maintain consistency and reduce rework.

Quick Start

Start applying the frontend visual patterns to a new or existing React component to enforce the design system and consistent component structure.

Frequently Asked Questions about Frontend Visual Patterns

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

FAQPage Schema
How do I standardize React component structure and styling across a TypeScript project?▼

Standardize React component structure by enforcing co-located CSS Modules, consistent file organization, and design tokens. This ensures UI components, modals, and forms maintain a pixel-perfect visual system across the project.

What are the best practices for building pixel-perfect React UI components with CSS Modules?▼

Building pixel-perfect React UI components requires applying design-system rules for typography, colors, spacing, and animations. CSS Modules enforce scoped styling, while documented visual constraints reduce rework and maintain consistency.

Does this frontend UI pattern guidance work with Socket.IO integration for game interfaces?▼

Yes, the frontend visual patterns explicitly support building and debugging game interfaces with Socket.IO integration. The conventions apply to real-time UI components, ensuring consistent visual architecture and state management.

Can I use these design system rules to refactor existing React modals and forms?▼

Yes, you can refactor existing React modals and forms by applying the centralized design-system rules. This process enforces typography, color, and spacing constraints to align legacy components with a standardized visual system.

Why do my React UI components look inconsistent across different parts of my application?▼

React UI components look inconsistent without centralized design tokens and component structure conventions. Applying a documented visual system with CSS Modules and strict spacing rules eliminates visual drift and reduces styling rework.

Do I need TypeScript to apply these frontend visual patterns and design system constraints?▼

TypeScript is the primary target for these frontend visual patterns. The conventions enforce component structure and design system rules specifically within React and TypeScript projects to maintain robust, pixel-accurate UIs.

Related Skills

Explore More Software Engineering Skills→
kaeligkaelig
7

code-writer

Generate React component files from design briefs and architecture documents.

Community
Advanced
Bigalan09Bigalan09
1

harden

Audit UI components and generate a prioritized hardening plan.

Community
Advanced
web3br1web3br1

frontend-design-system

Apply Luminaris design system tokens to Tailwind CSS and TypeScript components.

Community
Intermediate
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced