ui-presentation
UI patterns and presentation components
Install / Use
npx skills add miguelslemos/stock_portfolioInstalls into whichever agent you are using.
Cursor Rules
Cursor IDE rules (v2)
Quality Score
Category
Development & EngineeringSupported Platforms
Tags
Our assessment of ui-presentation
ui-presentation scores 48/100 on our quality scale, 4277th of 4,611 Development & Engineering skills we index.
Its Cursor Rules is 1.5 KB long, split into 5 sections with 1 code example: moderately detailed.
It has no GitHub stars yet, so there is no community track record; judge it on its content.
Maintenance, license and trust
- We could not determine when the repository was last updated.
- Our last check on 2026-10-18 found the source still online.
- No license is declared. By default that means all rights are reserved: you can read it, but reusing or redistributing it is not clearly permitted. Ask the author before building on it commercially.
- Its trust signals score 68/100, with 3 cautions from licensing, adoption, age or documentation. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.
Safety scan
No issues foundOur scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands. An AI review of the same text found nothing harmful.
AI review by kimi-k2.7-code on 2026-09-24. Automated pattern scan on 2026-09-24. It catches known dangerous patterns, not every risk — read a skill before letting an agent act on it.
ui-presentation compared with similar skills
All 4 of these similar skills score higher than ui-presentation; compare them before choosing.
| Skill | Score | Stars | Updated | Format |
|---|---|---|---|---|
| ui-presentation (this skill)by miguelslemos | 48 | 0 | — | Cursor Rules |
| taste-skillby Leonxlnx | 100 | 110.6k | 1d ago | CLAUDE.md |
| ai-job-searchby ai-job-search-dev | 100 | 69.8k | today | CLAUDE.md |
| claude-howtoby luongnv89 | 100 | 46.6k | 2d ago | CLAUDE.md |
| algorithmic-artby anthropics | 100 | 177.9k | 44d ago | SKILL.md |
Frequently asked questions
- How do I install ui-presentation?
- Run
npx skills add miguelslemos/stock_portfolio. The install tabs above show the steps for each supported agent. - Which AI agents does ui-presentation work with?
- It is written for Cursor, as a Cursor Rules file. Other agents that read the same format can often use it too.
- Is ui-presentation safe to use?
- Our scan of the whole file found no instruction hijacking, hidden characters, credential access, data exfiltration or destructive commands. An AI review of the same text found nothing harmful. It declares no license and scores 68/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
- Is ui-presentation still maintained?
- We could not determine when the repository was last updated.
Skill content
View source on GitHubdescription: UI patterns and presentation components globs: web/src/presentation//*.ts, web/src/presentation//*.css alwaysApply: false
UI and Presentation
Professional Look with Low Complexity
- Clean, professional appearance using pure CSS (no CSS framework)
- CSS variables for colors, shadows, and spacing (already defined in
styles.css) - Inter font as the typographic standard
- Responsive layout with native grid/flexbox
Component Reuse
- Use Builders for complex HTML (
ModalBuilder,YearDetailsBuilder) - Extract repeated visual patterns into reusable functions/builders
- Never duplicate markup — if a pattern appears 2+ times, create a builder
// ❌ Bad: duplicated HTML
const card1 = `<div class="card"><h3>${title1}</h3>...</div>`;
const card2 = `<div class="card"><h3>${title2}</h3>...</div>`;
// ✅ Good: reusable builder
const card1 = CardBuilder.create(title1).withContent(...).build();
const card2 = CardBuilder.create(title2).withContent(...).build();
Presentation vs Domain Separation
- Formatters (
BRLFormatter,USDFormatter) belong inpresentation/ - Never put calculation logic in builders or UI controllers
PortfolioAppcoordinates the UI but delegates logic to use cases- Data arrives at the presentation layer already processed — just format and display
CSS
- Use existing CSS variables (
--color-*,--shadow-*,--radius-*) - Avoid inline styles — use classes
- Maintain a single
styles.cssfile organized by section
Related Skills
taste-skill
110.6kAgent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
ai-job-search
69.8kThe job search that runs on your machine. AI job application framework built on Claude Code: evaluate postings, tailor CVs, write cover letters, prep interviews. Fork it and own it.
claude-howto
46.6kA visual, example-driven guide to Claude Code — from basic concepts to advanced agents, with copy-paste templates that bring immediate value.
algorithmic-art
177.9kCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.
Trust signals
From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.