Expert guidance for building and maintaining a real-time agile story point sizing tool with SvelteKit 2.x, Svelte 5 (runes), shadcn-svelte, and Tailwind. Client-only architecture with localStorage persistence for sprint planning poker sessions.
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 60/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Expert guidance for developing a real-time agile story point sizing tool for sprint planning. Built with SvelteKit 2.x, Svelte 5 (runes API), TypeScript, shadcn-svelte, and Tailwind CSS.
This is a client-only planning poker application for agile teams. All data persists in localStorage with no backend. Supports anonymous/named voting, multiple point scales (Fibonacci, T-shirt, man-days, custom), and session/round management.
**Target Audience:** Agile teams, Scrum masters, Product owners
**Key Goal:** Privacy-respecting, fast sprint estimation tool
1. **Client-Only:** No server-side logic, all state in localStorage
2. **Privacy-First:** No external API calls, tracking, or analytics
3. **Session Management:** 8-character codes (exclude '0' and 'o')
4. **Roles:** Owner/host and participants with observer mode toggle
5. **Real-Time Simulation:** Event listeners and polling via `SessionClient`
Always use Svelte 5 runes for reactive state:
```typescript
let count = $state(0);
let doubled = $state.derived(() => count * 2);
$effect(() => {
console.log(`Count changed to ${count}`);
});
```
**Modals:**
**State Management:**
1. **Always use shadcn-svelte** for new UI components
2. **Tailwind CSS** for all styling
3. **Layout Standard:**
- Settings/exit buttons: top-right
- Session info: top-left
4. **Color Theme:**
- Primary: red, white, blue
- Buttons: gray
- Text: black
- Work area: white background
1. **Anonymous Mode:** No names required
2. **Man-Days Mode:** When `storyPointOptions = ['man_days']`, show numeric input
3. **Keyboard Shortcuts:** 0-8 for quick voting, ? for help
4. **Point Scales:** Fibonacci, T-shirt sizes, custom arrays
```bash
npm run dev # Start dev server
npm run build # Production build
npm run preview # Preview production build
npm run test # Unit tests (Vitest)
npm run test:unit # Alias for unit tests
npm run test:e2e # E2E tests (Playwright)
npm run lint # Lint code
npm run format # Format code
npm run check # TypeScript/Svelte checks
```
```bash
npm run docker:up # Start containers
npm run docker:down # Stop containers
```
```bash
npm run db:setup # Initialize database
npm run db:reset # Reset database
```
1. **No Server-Side Logic:** All features must work client-side
2. **No External Dependencies:** No external APIs or tracking services
3. **localStorage Only:** All persistence via browser storage
4. **Privacy Requirement:** Zero data collection or transmission
5. **Accessibility:** Keyboard navigation and screen reader support
6. **Responsive Design:** Must work on desktop, tablet, and mobile
1. **Always check** `src/lib/localStore.ts` for data persistence patterns
2. **Reference** `src/routes/session/[sessionCode]/+page.svelte` for main voting logic
3. **Use** shadcn-svelte components before creating custom UI
4. **Follow** the established color theme (red/white/blue, gray buttons, black text)
5. **Maintain** the top-right settings/exit and top-left session info layout
6. **Test** both anonymous and named voting modes
7. **Validate** session codes exclude '0' and 'o'
8. **Ensure** observer mode works correctly (no voting, view-only)
```svelte
<script lang="ts">
let { isOpen, onClose, onSubmit } = $props();
let inputValue = $state('');
function handleSubmit() {
onSubmit(inputValue);
onClose();
}
</script>
{#if isOpen}
<Dialog.Root open={isOpen}>
<!-- Modal content -->
</Dialog.Root>
{/if}
```
```typescript
import { localStore } from '$lib/localStore';
// Save session
localStore.saveSession(sessionCode, sessionData);
// Get session
const session = localStore.getSession(sessionCode);
// Get recent sessions
const recent = localStore.getRecentSessions();
```
```typescript
import { roundService } from '$lib/services/roundService';
// Add participant vote
roundService.addVote(sessionCode, roundId, participantId, vote);
// Reveal votes
roundService.revealVotes(sessionCode, roundId);
// Calculate consensus
const consensus = roundService.calculateConsensus(votes);
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/sveltekit-agile-sizing-tool/raw