# Manage Frontend Styling

> Use when creating or updating Tailwind CSS 4, Flux, or Blade UI patterns and shared components.

- **Type:** Skill
- **Install:** `agentstack add skill-alizharb-agent-skills-manage-frontend-styling`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [AlizHarb](https://agentstack.voostack.com/s/alizharb)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [AlizHarb](https://github.com/AlizHarb)
- **Source:** https://github.com/AlizHarb/agent-skills/tree/main/resources/boost/skills/manage-frontend-styling

## Install

```sh
agentstack add skill-alizharb-agent-skills-manage-frontend-styling
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Manage Frontend Styling

## When To Use

Use this skill for Blade UI, Tailwind styling, Flux controls, shared components, RTL behavior, dark mode, and accessibility-sensitive presentation.

## Inputs Needed

- Screen, user flow, responsive needs, locale requirements, design tokens, and reuse opportunities.

## Workflow

1. Inspect existing Blade, Flux, Tailwind, and component conventions.
2. Prefer shared components or partials when markup repeats.
3. Keep templates small and role-focused.
4. Use Tailwind 4 utilities and class sorting with Prettier.
5. Use only `oklch()` theme colors in app-owned CSS tokens.
6. Make layouts work in both light and dark modes.
7. Make layouts work in both LTR and RTL.
8. Localize all user-facing strings.
9. Keep accessibility in mind: semantics, labels, focus states, keyboard use, and contrast.
10. Add tests or snapshots when UI behavior is important.

## Files That May Be Created

- Blade components, partials, stylesheets, translation files, and tests.

## Files That May Be Modified

- `resources/views/**`
- `resources/css/**`
- translation files
- component classes
- frontend tests

## Architecture Rules

- Keep presentation code thin and reusable.
- Avoid logic that belongs in Actions, Services, DTOs, or controllers.
- Do not let template files become dumping grounds.

## Testing Requirements

- Test responsive behavior, accessibility-sensitive interactions, and localization when relevant.

## Review Checklist

- Is the markup shared instead of duplicated?
- Are classes sorted and readable?
- Does the UI remain usable in RTL and dark mode?
- Are strings translated?

## Common Mistakes to Avoid

- Hardcoded colors or copy.
- Repeating the same component markup many times.
- Writing heavy Blade files with too much logic.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [AlizHarb](https://github.com/AlizHarb)
- **Source:** [AlizHarb/agent-skills](https://github.com/AlizHarb/agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-alizharb-agent-skills-manage-frontend-styling
- Seller: https://agentstack.voostack.com/s/alizharb
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.