ui-style-guide
Guide Angular UI Styling
Frontend teams need consistent Angular component structure and visual styling across the Guessimate UI. This skill provides practical standards for components, state, Tailwind CSS usage, colors, cards, and typography.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "ui-style-guide" from https://skillstore.io/skills/davidopdebeeck-ui-style-guide.md and its manifest at https://skillstore.io/api/skills/davidopdebeeck-ui-style-guide/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "ui-style-guide". Review a new session page component for style-guide alignment.
Expected outcome:
- The component follows the standalone pattern and uses explicit imports.
- Move feature state into a session store because multiple child components consume it.
- Replace arbitrary spacing with theme spacing and add dark mode classes for color utilities.
Using "ui-style-guide". Plan folders for a lobby management feature.
Expected outcome:
- Place routed containers under the feature pages area.
- Keep presentational lobby widgets under feature components.
- Use a feature service for lobby state and keep shared UI helpers in the shared area.
Using "ui-style-guide". Improve a card layout for visual consistency.
Expected outcome:
- Use the documented surface background, border, and divider treatment.
- Keep the standard rounded corner size for cards and containers.
- Use the header typography pattern for title and subtitle text.
Security Audit
SafeAll static findings were reviewed against SKILL.md and are false positives caused by Markdown code fences, inline code, tables, and style-guide wording. The skill is documentation-only frontend guidance for Angular and Tailwind CSS, with no executable scripts, network behavior, file access, or prompt injection attempts found.
Risk Factors
⚙️ External commands (49)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/davidopdebeeck-ui-style-guide/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/davidopdebeeck-ui-style-guide?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/davidopdebeeck-ui-style-guide?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/davidopdebeeck-ui-style-guide/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/davidopdebeeck-ui-style-guide.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
DavidOpDeBeeck. (2026). ui-style-guide security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/davidopdebeeck-ui-style-guide/audits/8BibTeX citation
@techreport{davidopdebeeck-davidopdebeeck-ui-style-guide-2026,
author = {DavidOpDeBeeck},
title = {ui-style-guide security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/davidopdebeeck-ui-style-guide/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ui-style-guide security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "DavidOpDeBeeck"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/davidopdebeeck-ui-style-guide/audits/8"
identifiers:
- type: other
value: "skillstore:davidopdebeeck-ui-style-guide:audit:8"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Build Consistent Components
Apply the project rules for standalone components, inline templates, imports, selectors, and Angular control flow.
Review UI Pull Requests
Check whether new UI code follows the project structure, state management rules, naming conventions, and Tailwind styling standards.
Align Product UI Decisions
Use the documented colors, card treatments, typography, and dark mode rules when planning or refining interface changes.
Try These Prompts
Review this Angular component against the ui-style-guide. Focus on naming, standalone component structure, inline template usage, and Tailwind classes.
Use the ui-style-guide to propose a feature-based folder layout for this new UI feature. Include components, pages, services, and models where needed.
Compare this feature state design with the ui-style-guide. Recommend where to use signals, computed values, effects, RxJS, and service stores.
Audit this UI flow against the ui-style-guide. Cover project structure, component boundaries, state handling, semantic colors, dark mode, cards, and typography.
Best Practices
- Use the guide before writing new Angular UI code, not only during review.
- Keep feature-specific logic inside feature folders and reserve shared code for reusable utilities.
- Apply semantic color names and dark mode variants consistently for every color-related class.
Avoid
- Do not mix unrelated feature code into technical folders only by file type.
- Do not add arbitrary Tailwind values when a project theme value exists.
- Do not rely on constructor injection when the guide recommends the inject function for the component.
Frequently Asked Questions
What frontend stack does this skill cover?
Can this skill generate complete UI code?
Does the skill run commands or modify files?
Is it useful outside the Guessimate project?
How should reviewers use it?
Does it include accessibility guidance?
Developer Details
Author
DavidOpDeBeeckLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
34f316ba14ef36c7a620fc09f2676d2429997a77
Maintenance freshness
7/22/2026
Usage
6 downloads · 276 views
File structure
📄 SKILL.md