RyanSparkc

---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
---

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

RyanSparkc

Vite / React / Tailwind / Nanostores / Astro Best Practices

This guide outlines best practices for building a Vite / React / Tailwind / Nanostores / Astro application. The goal is readability and maintainability, minimizing abstraction to keep the codebase clear.

Tech Stack Overview

• Astro
• Preact
• Nanostores
• Tailwind CSS
• Postgres

RyanSparkc

Best Practices for AstroJS, React, Tailwind CSS, and Nanostores

Application Structure

Project Organization

src/
├── components/
│   ├── ui/              # Reusable UI components
│   └── features/        # Feature-specific components

RyanSparkc

Project Requirements Document: The Urlist Website

The following table outlines the detailed functional requirements of The Urlist website.

Requirement ID	Description	User Story	Expected Behavior/Outcome
FR001	Creating a New URL List	As a user, I want to be able to start a new, empty list so I can begin adding URLs.	The system should provide a clear way for the user to initiate the creation of a new list, potentially presenting an empty list view or an "add new list" button.
FR002	A

RyanSparkc

// Update globs depending on your framework
---
name: tailwind_v4
description: Guide for using Tailwind CSS v4 instead of v3.x
globs: ["**/*.{js,ts,jsx,tsx,mdx,css}"]
tags:
  - tailwind
  - css
---