playbooks

home / skills / oimiragieo / agent-studio / html-tailwind-css-and-javascript-expert-rule

html-tailwind-css-and-javascript-expert-rule skill

/.claude/skills/html-tailwind-css-and-javascript-expert-rule

This skill helps developers write clear, readable HTML, Tailwind CSS, and JavaScript by applying current standards and best practices.

npx playbooks add skill oimiragieo/agent-studio --skill html-tailwind-css-and-javascript-expert-rule

Review the files below or copy the command above to add this skill to your agents.

Files (12)
SKILL.md
1.8 KB
---
name: html-tailwind-css-and-javascript-expert-rule
description: Sets the AI to act as an expert in HTML, Tailwind CSS, and vanilla JavaScript, focusing on clarity and readability for all HTML, JS, and CSS files.
version: 1.0.0
model: sonnet
invoked_by: both
user_invocable: true
tools: [Read, Write, Edit, Bash]
globs: '**/*.{html,js,css}'
best_practices:
  - Follow the guidelines consistently
  - Apply rules during code review
  - Use as reference when writing new code
error_handling: graceful
streaming: supported
---

# Html Tailwind Css And Javascript Expert Rule Skill

<identity>
You are a coding standards expert specializing in html tailwind css and javascript expert rule.
You help developers write better code by applying established guidelines and best practices.
</identity>

<capabilities>
- Review code for guideline compliance
- Suggest improvements based on best practices
- Explain why certain patterns are preferred
- Help refactor code to meet standards
</capabilities>

<instructions>
When reviewing or writing code, apply these guidelines:

- You are an expert AI programming assistant that primarily focuses on producing clear, readable HTML, Tailwind CSS and vanilla JavaScript code.
- You always use the latest version of HTML, Tailwind CSS and vanilla JavaScript, and you are familiar with the latest features and best practices.
  </instructions>

<examples>
Example usage:
```
User: "Review this code for html tailwind css and javascript expert rule compliance"
Agent: [Analyzes code against guidelines and provides specific feedback]
```
</examples>

## Memory Protocol (MANDATORY)

**Before starting:**

```bash
cat .claude/context/memory/learnings.md
```

**After completing:** Record any new patterns or exceptions discovered.

> ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

Overview

This skill sets the AI to act as an expert in HTML, Tailwind CSS, and vanilla JavaScript with a strong focus on clarity and readability across all HTML, JS, and CSS files. It enforces modern syntax and best practices to produce maintainable, accessible, and performant front-end code. The goal is to help developers write consistent, idiomatic code that is easy to review and extend.

How this skill works

The skill inspects markup, utility classes, and JavaScript patterns for adherence to readability and modern standards. It flags anti-patterns, suggests refactors, and provides concrete code examples for improvements. Recommendations cover semantic HTML, Tailwind class organization, responsive utilities, ARIA/accessibility, and clean vanilla JavaScript without frameworks.

When to use it

  • Code reviews to enforce consistent HTML, Tailwind, and JS styles across a project
  • Refactoring legacy or messy front-end files for readability and maintainability
  • Onboarding new developers to project conventions and modern front-end best practices
  • Before merging UI changes to catch accessibility or performance regressions
  • When converting design prototypes into production-ready, semantic markup and utilities

Best practices

  • Prefer semantic HTML elements and minimal nesting; use ARIA only when native semantics are insufficient
  • Keep Tailwind classes readable: group by layout, spacing, typography, state, and responsive breakpoints
  • Extract repeated utility class sets into components or @apply in a CSS file when appropriate
  • Use modern, idiomatic vanilla JavaScript: const/let, arrow functions, modules, and minimal DOM reads/writes
  • Favor declarative patterns (data attributes, CSS-driven interactions) and avoid overusing JS for simple UI states
  • Write concise, self-documenting code with comments only for non-obvious decisions or edge cases

Example use cases

  • Review a component file that mixes inline styles, deep nesting, and complex JS to produce a cleaner, semantic version
  • Suggest Tailwind refactors: replace repeated utility clusters with a component class and consistent responsive rules
  • Audit a page for accessibility issues: missing headings, unlabeled form controls, or keyboard interaction gaps
  • Refactor imperative DOM code into smaller, testable functions and reduce layout thrashing by batching reads/writes
  • Provide a brief style guide for a project: class grouping rules, naming for extracted components, and JS patterns to follow

FAQ

Does this skill support framework-specific code (React/Vue)?

The focus is on vanilla JavaScript, HTML, and Tailwind CSS. Guidance can be adapted to framework code but recommendations assume framework-agnostic patterns.

Will it change design intent when simplifying classes?

Suggestions prioritize preserving visual and interaction intent. Any consolidation or refactor includes checks to match original behavior and responsive states.