{
 "id": "frontend-tailwind-js",
 "kind": "skill",
 "name": "Frontend: HTML, CSS, Tailwind, JavaScript",
 "description": "Build and fix frontends: HTML, CSS, Tailwind CSS (v3 and v4 differ), JavaScript and TypeScript, Vite, Alpine, Blade, Vue and React components.",
 "version": "1.0.0",
 "author": "Hexa Hub",
 "files": {
  "SKILL.md": "---\nname: frontend-tailwind-js\ndescription: Build and fix frontends: HTML, CSS, Tailwind CSS (v3 and v4 differ), JavaScript and TypeScript, Vite, Alpine, Blade, Vue and React components.\ntitle: Frontend: HTML, CSS, Tailwind, JavaScript\nicon: tabler:brand-tailwind\ncategory: Development\ntriggers: css, tailwind, html, javascript, typescript, vite, alpine, button, layout, responsive, flexbox, grid, component, npm, eslint, frontend, ui, style, class\nmarkers: tailwind\nrecipes: check.eslint, check.tsc, deps.npm-ci, npm.build, npm.test\nrelated: laravel-php\n---\n\n# Frontend: HTML, CSS, Tailwind, JavaScript\n\n## Find out what the project uses first\nRead `package.json` and the lockfile: the **Tailwind version** (`tailwindcss`), the bundler (Vite), the framework (Vue, React, Alpine, Livewire, none) and the scripts (`dev`, `build`, `test`). Follow what is there. For a Laravel project the frontend lives in `resources/` (`css/app.css`, `js/app.js`, Blade views).\n\n## Tailwind: v3 and v4 are different\n| | v3 | v4 |\n|---|---|---|\n| CSS entry | `@tailwind base; @tailwind components; @tailwind utilities;` | `@import \"tailwindcss\";` |\n| Configuration | `tailwind.config.js` (`content`, `theme.extend`) | in CSS: `@theme { --color-brand: #5b21b6; }`; a config file is optional |\n| Content detection | `content: [...]` globs | automatic |\n| Vite | PostCSS plugin | `@tailwindcss/vite` plugin |\nWhich one applies? Look at the installed version in `package.json`; if the CSS has `@import \"tailwindcss\"` it is v4. **Do not mix them.** If unsure, read the existing CSS and config and copy that style.\n\nUsing Tailwind well:\n- Utility classes in the markup (`flex items-center gap-4 rounded-lg p-4`); responsive prefixes mobile first (`md:flex`, `lg:grid-cols-3`); states (`hover:`, `focus-visible:`, `disabled:`, `dark:`).\n- Repeated patterns become a component (Blade component, Vue/React component) rather than `@apply` everywhere. Do not build class names from variables (`bg-${color}-500`): Tailwind only sees complete class names, so write them out or map to full strings.\n- Spacing and colours from the theme, not arbitrary values, unless the design needs one.\n\n## CSS without a framework\nMobile-first media queries; flexbox for one dimension and grid for two; `rem` for type and spacing; custom properties for colours; `min()`/`clamp()` for fluid sizes; logical properties (`margin-inline`). Do not fix layout with fixed widths and `!important`. Check at 320 px wide and at desktop width.\n\n## Accessibility (always)\nSemantic elements (`button`, `nav`, `main`, `label`), every input has a label, visible focus, text contrast at least 4.5:1, images have `alt`, buttons that only show an icon get `aria-label`, never remove outlines without a replacement, everything works with the keyboard.\n\n## JavaScript and TypeScript\n- `const`/`let`, no globals, `async/await` with `try/catch` at the boundary, `fetch` with a check of `response.ok`. Never put user data into `innerHTML`; use `textContent` or the framework's escaping.\n- TypeScript: strict mode, no `any` without a reason, types for data coming from the network are validated at runtime (zod or similar), not just asserted.\n- Alpine: state in `x-data`, events `@click`, show/hide with `x-show`; keep logic small, otherwise move it into a function.\n- Vue/React: keep components small; state as low as possible; keys on list items; no side effects while rendering.\n\n## Checks (run them, report them)\nRun `check.tsc` for TypeScript projects (the workspace folder must hold the `tsconfig.json`), `check.eslint` (`target` file or folder), `npm.test` if the project has tests, and `npm.build` to prove the build works (both ask first). `deps.npm-ci` installs dependencies from the lockfile (asks); never add or upgrade packages unless the user asks. Say which checks you ran and which you could not.\n\nYou cannot see the rendered page. When the user asks about appearance, reason from the HTML and CSS, say that you could not view it, and ask the user to look at the result.\n"
 }
}