skills.rest
hippocampus-dev
hippocampus-devOFFICIAL
Explore all skills by this author →
GitHub

frontend

Enforce Preact and Tailwind conventions for frontend JavaScript, HTML, and CSS components.

6|5|Updated Jul 27, 2024
Search Tags:#ui#accessibility#frontend#css#preact#web-development#tailwind
One-click install
npx skills add https://github.com/hippocampus-dev/hippocampus --skill frontend-hippocampus-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/hippocampus-dev/hippocampus/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/hippocampus-dev/hippocampus --skill frontend-hippocampus-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes frontend coding practices to improve consistency, readability, and accessibility when using Preact and Tailwind for web UI components.

Core Features & Use Cases

  • Enforces use of Preact for element creation unless otherwise specified
  • Guides the application of Tailwind for styling and layout
  • Documents framework selection rules for Next.js + shadcn/ui and Preact + Tailwind frontends
  • Provides manual accessibility guidelines to ensure usable UI components

Quick Start

Align new frontend components to the Preact + Tailwind conventions described above.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I enforce consistent Preact and Tailwind conventions across web components?▼

To enforce consistent Preact and Tailwind conventions across web components, apply standardized frontend rules for element creation and styling. This ensures uniform component design and improves overall code readability.

Does this frontend convention work with Next.js and shadcn/ui?▼

Yes, the frontend convention supports Next.js and shadcn/ui. It provides specific framework selection rules to guide standardization when using either Next.js with shadcn/ui or Preact with Tailwind.

How do I add manual accessibility guidelines to Preact UI components?▼

To add manual accessibility guidelines to Preact UI components, follow the documented accessibility rules provided by the frontend conventions. This ensures your web UI components remain usable and accessible.

What is the best way to standardize frontend JavaScript, HTML, and CSS coding practices?▼

The best way to standardize frontend JavaScript, HTML, and CSS coding practices is to apply framework-specific rules using Preact and Tailwind. This enforces consistent styling and component design across all projects.

Why use Preact for element creation instead of other methods in web development?▼

Using Preact for element creation is required to maintain standardized frontend conventions. It ensures consistent component design and integrates seamlessly with Tailwind for styling and layout in web UI development.

Related Skills

Explore More Software Engineering Skills→
veerababumanyamveerababumanyam

testing

Define testing standards for RawDrive across frontend, backend, and AI service.

Community
Basic
carayacaraya
1

preact_ui

Create accessible Preact UI components with JSX/TSX patterns and automated accessibility checks.

Community
Intermediate
gil-kapelgil-kapel
2

shadcn-ui

Integrate and customize React UI components with Tailwind CSS and Radix UI.

Community
Intermediate
mustafazeydanimustafazeydani

tailwind-css-patterns

Generate utility-first Tailwind CSS classes for responsive web design.

Community
Intermediate