friendlybet-company-design
Specialized design guidance for the FriendlyBet mobile sports betting interface.
Install
mkdir -p .claude/skills/friendlybet-company-design && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13477" && unzip -o skill.zip -d .claude/skills/friendlybet-company-design && rm skill.zipInstalls to .claude/skills/friendlybet-company-design
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Review or design FriendlyBet user experience, visual direction, mobile-first flows, premium sports interface, Hebrew/English copy fit, RTL behavior, accessibility, interaction patterns, and product UI polish. Use when a task touches screens, flows, layout, visual hierarchy, onboarding, prediction UX, share UX, or design quality.Key capabilities
- →Start design from the actual user flow
- →Prioritize mobile-first design with density for repeated use
- →Check Hebrew, English, RTL, text fit, and accessibility
- →Prefer familiar controls and icons for tools and actions
- →Design for degraded clarity during live transition incidents
- →Review the user-state matrix for user-facing features
How it works
The skill guides the design process for FriendlyBet by enforcing mobile-first principles, checking for RTL/accessibility, and ensuring clarity in various user states.
Inputs & outputs
When to use friendlybet-company-design
- →Design sports prediction UI
- →Check RTL accessibility for Hebrew/English
- →Review mobile dashboard layout
About this skill
FriendlyBet Design Department
Start Here
Read:
../../company/charter.md../../company/org-map.md../../company/agents/ux-lead.md../../company/agents/visual-product-designer.md../../company/agents/accessibility-rtl-designer.md
Read playbooks only when relevant:
../../company/playbooks/product-feature-review.md../../company/playbooks/new-sport-expansion.md../../company/playbooks/full-company-planning-review.md../../company/playbooks/live-scoring-operations.mdfor dashboard, leaderboard, podium, official scoring, projection, or group-completion states.
Read academy docs when design work touches senior training, cross-team product work, or release-quality UI:
../../company/academy/01-app-deep-dive.md../../company/academy/domains/product-design-growth-and-trust.md../../company/academy/certification/product-design-growth-certification.md
Workflow
- Start from the actual user flow, not decoration.
- Keep the product mobile-first, dense enough for repeated use, and premium without noise.
- Check Hebrew, English, RTL, text fit, accessibility, and compact control states.
- Prefer familiar controls and icons for tools and actions.
- Hand off scoring and lock-state ambiguity to Product, Engineering, and QA.
- During live transition incidents, design for degraded clarity: users should still understand whether points are updated and whether knockout picks are open even if Pundit, Stories, or decorative content are missing.
- For result/scoring/match surfaces, design optional content as removable enhancement: if Pundit, Stories, banter, share copy, social/video, or polish fails, the core state must still be clear and usable.
- For user-facing features, review the user-state matrix and name the required visible UI for each relevant state: empty, pending, locked, reopened, partial, submitted, scored, stale, complete, and post-phase.
- During planning dialogue, shape user-facing plans by identifying missing flow states, mobile/RTL/text-fit issues, accessibility gaps, degraded states, and interaction ambiguity before Engineering starts.
- Reject internal engineering/ops labels in the interface. The UI may express delay, verification, calculation, or automatic update, but must not show failed, error, timeout, workflow, provider, cache, or debugging language to ordinary users.
- During company planning, challenge Product copy, Engineering state models, QA assumptions, and Content tone until the revised UI feels like a coherent product experience, not a technical incident report.
- Reject speed-driven UX shortcuts that skip degraded states, RTL/text-fit, accessibility, or calm human language. A compact UI plan is valid only after these checks are done.
- For live results, design around what a person needs to understand: match pending, live, final being confirmed, points updating, verified points, or correction applied. Never expose the underlying Action/provider/cache failure as the user's state.
- Penalty advancement must be visible and understandable on match surfaces; a tied score with an advancing team cannot look like an unresolved draw.
Output
Return UX recommendation, state-by-state screen behavior, visual direction, RTL/accessibility risks, and concrete screen/component notes.
When not to use it
- →The task does not involve user experience, visual direction, or UI polish for FriendlyBet
- →The task requires internal engineering or operations labels in the user interface
Limitations
- →It is specific to FriendlyBet's design requirements
- →It rejects internal engineering/ops labels in the interface
- →It rejects speed-driven UX shortcuts that skip degraded states, RTL/text-fit, or accessibility
How it compares
This workflow applies specific design principles for FriendlyBet, including mobile-first, RTL/LTR compatibility, and handling degraded states, ensuring a consistent and accessible user experience.
Compared to similar skills
friendlybet-company-design side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| friendlybet-company-design (this skill) | 0 | 1mo | No flags | Intermediate |
| ui-ux-designer | 41 | 4mo | No flags | Intermediate |
| ux-ui-design | 0 | 5mo | No flags | Intermediate |
| userinterface-wiki | 0 | 5mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-ux-designer
sickn33
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
ux-ui-design
jnPiyush
Design user experiences with wireframing, prototyping, user flows, accessibility, and production-ready HTML prototypes. Use when creating wireframes, building interactive prototypes, designing user flows, implementing accessibility standards, or producing HTML/CSS design deliverables.
userinterface-wiki
raphaelsalaja
UI/UX best practices for web interfaces. Use when reviewing animations, CSS, audio, typography, UX patterns, prefetching, or icon implementations. Covers 11 categories from animation principles to typography. Outputs file:line findings.
frontend-design
darthlinuxer
Design thinking and decision-making for web UI. Use when designing components,
hig-components-controls
wegonbeok45
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
impeccable
rawkode-academy
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding,