skills.rest
Alexey-Lukin
Alexey-LukinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend

Guides Phlex component, Tailwind v4 token, Turbo, and Stimulus work in the silken_net Rails frontend.

23|1|Updated Feb 26, 2026
Search Tags:#frontend#design tokens#tailwind#turbo#rails#stimulus#phlex
One-click install
npx skills add https://github.com/Alexey-Lukin/silken_net --skill frontend-alexey-lukin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/Alexey-Lukin/silken_net/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/Alexey-Lukin/silken_net --skill frontend-alexey-lukin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? The silken_net view layer has non-obvious rules — no tailwind.config.js, design tokens only in shared components, no DB queries in Phlex initializers, locale-free Turbo broadcast payloads — and violating them fails silently or reds CI. This Skill indexes those rules and routes you to the authoritative docs before you break them. ## Core Features & Use Cases - Design-token system guidance: Explains the Tailwind v4 @theme SSOT in app/assets/tailwind/application.css, the gaia-/status-/token-* token families, and the CUSTOM_TEXT_SCALE registration requirement for new font sizes. - Phlex component conventions: Covers the ApplicationComponent base, the tokens() TailwindMerge wrapper, class-autoscoped t('.key') i18n, and the component registry that CI enforces. - Gotcha index with on-demand detail: 43+ numbered gotchas indexed one line each in SKILL.md, with full mechanisms and incident history in gotchas.md loaded only when needed. - Use Case: You add a Stimulus controller and Cmd+Enter is dead — the Skill tells you data-controller must sit on a common ancestor of all its targets, a failure that is silent by construction. ## Quick Start Ask the assistant to add a new Phlex component with proper design tokens and i18n for the trees domain in the silken_net frontend.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I add a Phlex component in a Rails app?▼

Create a Ruby class under app/views/components/<domain>/ inheriting from ApplicationComponent with a view_template method, accept pre-loaded data instead of querying in initialize, and use t('.key') for i18n. You must also register it in the docs/04_04 component registry or CI fails.

How do I add a design token in Tailwind v4 without tailwind.config.js?▼

Edit the @theme block in app/assets/tailwind/application.css, which is the single source of truth in Tailwind v4. New font sizes must additionally be registered in CUSTOM_TEXT_SCALE so TailwindMerge can resolve conflicts.

Why is my Tailwind class not applying any styles?▼

Tailwind v4 silently emits nothing for unknown tokens, so a typo or undeclared token fails without a build error. Grep the built CSS for the class stem, and verify the token is declared in the @theme block with the correct namespace prefix.

Why does my Turbo broadcast render without current_user or locale?▼

Turbo broadcast_* methods run in model context outside any request, so current_user, session, and route helpers are unavailable. Render components with explicitly passed data and ensure the payload carries no locale-dependent prose.

Why is my Stimulus controller target not registering?▼

A Stimulus controller's scope is its element plus descendants, so targets outside that subtree never register and fail silently. Place the data-controller attribute on a common ancestor of all its targets.

Can I use raw Tailwind color classes in shared components?▼

No, shared components must use semantic tokens like bg-status-danger or bg-gaia-surface so both light and dark themes stay coherent. Raw colors are only legal when theme-invariant and explicitly declared, and the gaia:lint_tokens gate reds CI on violations.

Related Skills

Explore More Software Engineering Skills→
nschneblenschneble

authentication-flow

Generate Rails 8 authentication with users, sessions, and password resets.

Community
Intermediate
VidyaBodepudiVidyaBodepudi
2

browser-testing-with-devtools

Inspect frontend UI rendering, responsiveness, and accessibility with browser DevTools.

Community
Intermediate
dsteven12dsteven12
1

doc-css-framework

Generate branded, print-ready Airtable documentation with CSS variables and component classes.

Community
Intermediate
faqndo97faqndo97
32

inertia-rails

Integrate Rails with React, Vue, or Svelte frontends via Inertia.

Community
Advanced