How do I install the Willyu1007 Mytrader Style Frontend UI skill?

Run npx skillmds@latest add tomevault-io/willyu1007-mytrader-style-frontend-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Willyu1007 Mytrader Style Frontend UI skill do?

Style Frontend UI It is listed under Web & Frontend on SkillMD.

Is Willyu1007 Mytrader Style Frontend UI safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Willyu1007 Mytrader Style Frontend UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Willyu1007 Mytrader Style Frontend UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Willyu1007 Mytrader Style Frontend UI?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Willyu1007 Mytrader Style Frontend UI by tomevault-io

Name: Willyu1007 Mytrader Style Frontend UI
Author: tomevault-io

File contents

Style Frontend UI

Purpose

Create consistent UI styling that is easy to maintain and scales with the codebase.

When to use

Use this skill when you are:

Styling new components or pages
Refactoring inconsistent styles
Introducing theme tokens (spacing, colors, typography)
Standardizing layout utilities and responsive patterns

Inputs

UI kit or styling solution used by the codebase (CSS modules, styled components, theme system, etc.)
Design requirements (spacing scale, typography, breakpoints)
Accessibility constraints (contrast, focus states)

Outputs

A styling approach decision for the component/feature
Theme-token usage (where supported)
Reusable style primitives (layout components, utility classes)

Rules

Styling MUST follow a single primary approach for consistency.
Theme tokens SHOULD be used instead of hardcoded values where available.
Components MUST have accessible focus states and sufficient contrast.
Responsive behavior SHOULD be explicit and testable.

Steps

Choose the styling method consistent with the codebase.
Identify reusable style tokens (spacing, typography).
Implement component styles with:
- predictable naming
- minimal duplication
Verify:
- keyboard navigation and focus
- responsive layout for common breakpoints

Verification

Styles follow the project's primary styling approach
Theme tokens are used (no hardcoded colors/spacing where tokens exist)
Components have accessible focus states
Color contrast meets accessibility guidelines
Responsive layout works for common breakpoints
Keyboard navigation is visually clear

Boundaries

MUST NOT mix styling approaches within the same component
MUST NOT hardcode values when theme tokens are available
MUST NOT skip focus state styling
MUST NOT ignore color contrast requirements
SHOULD NOT duplicate style definitions (use shared utilities/tokens)
SHOULD NOT use magic numbers for spacing/sizing

Included assets

Templates: ./templates/ includes a style object pattern and token checklist.
Examples: ./examples/ includes a consistent component style pattern.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: willyu1007-mytrader-style-frontend-uidescription: Style Frontend UI---# Style Frontend UI## PurposeCreate consistent UI styling that is easy to maintain and scales with the codebase.## When to useUse this skill when you are:- Styling new components or pages- Refactoring inconsistent styles- Introducing theme tokens (spacing, colors, typography)- Standardizing layout utilities and responsive patterns## Inputs- UI kit or styling solution used by the codebase (CSS modules, styled components, theme system, etc.)- Design requirements (spacing scale, typography, breakpoints)- Accessibility constraints (contrast, focus states)## Outputs- A styling approach decision for the component/feature- Theme-token usage (where supported)- Reusable style primitives (layout components, utility classes)## Rules- Styling MUST follow a single primary approach for consistency.- Theme tokens SHOULD be used instead of hardcoded values where available.- Components MUST have accessible focus states and sufficient contrast.- Responsive behavior SHOULD be explicit and testable.## Steps1. Choose the styling method consistent with the codebase.2. Identify reusable style tokens (spacing, typography).3. Implement component styles with: - predictable naming - minimal duplication4. Verify: - keyboard navigation and focus - responsive layout for common breakpoints## Verification- [ ] Styles follow the project's primary styling approach- [ ] Theme tokens are used (no hardcoded colors/spacing where tokens exist)- [ ] Components have accessible focus states- [ ] Color contrast meets accessibility guidelines- [ ] Responsive layout works for common breakpoints- [ ] Keyboard navigation is visually clear## Boundaries- MUST NOT mix styling approaches within the same component- MUST NOT hardcode values when theme tokens are available- MUST NOT skip focus state styling- MUST NOT ignore color contrast requirements- SHOULD NOT duplicate style definitions (use shared utilities/tokens)- SHOULD NOT use magic numbers for spacing/sizing## Included assets- Templates: `./templates/` includes a style object pattern and token checklist.- Examples: `./examples/` includes a consistent component style pattern.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.

Frequently asked questions

Willyu1007 Mytrader Style Frontend UI