frontend-guard

Enforce TypeScript typing, design system, and API contracts in React/Next.js frontends.

1|Updated Mar 28, 2026

Search Tags:#React #TypeScript #Next.js #Tailwind CSS #Frontend #Code quality

Ready to run

npx skills add https://github.com/Nelkit/sydney-liveability-ai --skill frontend-guard

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-guard
Source: https://github.com/Nelkit/sydney-liveability-ai/tree/main/.copilot/skills/frontend-guard
Command: npx skills add https://github.com/Nelkit/sydney-liveability-ai --skill frontend-guard

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps ensure that all frontend contributions adhere to Sydney Liveability AI's design system, strict TypeScript typing, and established component architecture.

Core Features & Use Cases

Design System Consistency: Enforces visual consistency with Tailwind usage and component spacing.
Code Quality: Requires strict TypeScript interfaces and keeps shared state centralized.
Technical Standards: Implements Turf and Leaflet coordinate conventions and API contract adherence.
Use Case: Refactoring a component in the frontend without altering the current design language.

Quick Start

Refactor the 'SubscriptionCard' component with frontend-guard to align with the current UI standards.

Frequently Asked Questions about frontend-guard

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

FAQPage Schema

How do I enforce design system consistency in a React and Tailwind CSS application?▼

To enforce design system consistency in a React and Tailwind CSS application, apply strict component spacing rules and visual standards. This approach ensures all frontend contributions align with predefined UI guidelines without altering the current design language.

How do I manage shared state and strict TypeScript typing in a Next.js frontend?▼

To manage shared state and strict TypeScript typing in a Next.js frontend, require explicit TypeScript interfaces and keep shared state centralized. This maintains robust code quality and predictable data flow throughout your application architecture.

What's the best way to handle Turf and Leaflet coordinate conventions in a TypeScript app?▼

The best way to handle Turf and Leaflet coordinate conventions in a TypeScript app is to enforce strict technical standards for mapping libraries. This ensures correct geographic data processing and adherence to API contracts.

Can I refactor a React component without breaking established API contracts?▼

Yes, you can refactor a React component without breaking established API contracts by enforcing proper data flow management and strict interface typing. This ensures backend communication remains stable during visual updates.

Why does my frontend refactoring break visual consistency in Tailwind CSS?▼

Frontend refactoring often breaks visual consistency in Tailwind CSS when component spacing and design tokens deviate from the central design system. Enforcing strict Tailwind usage guidelines prevents these visual regressions during updates.